Chrome мигает черным экраном при использовании css transition rotate

Question

Переходное вращение заставляет хром мигать черным экраном. Это ошибка Chrome (отлично работает в Safari) или ее можно исправить с помощью умного CSS.

div { 
  width:200px; 
  height:200px; 
  position:relative; 
  background:#ddd;
}

span { 
  display:inline-block; 
  position:absolute; 
  top:40px; 
  left:40px; 
  width:20px; 
  background:#007; 
  height:10px; 
  -webkit-transition: all .5s; 
}

div:hover > span { 
  -webkit-transform: rotate(180deg); 
}

<div>
    <span></span>
</div>

Пример скрипка здесь .

Проблема с этой проблемой заключается в том, что она возникает не каждый раз, поэтому вам придется навести серый квадрат несколько раз, и вы увидите, что экран мигает черным.

Проверено в:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0

Отлично работает на:
Safari 5.1.2 (6534.52.7)

Все тесты на снежном барсе

Answer 1

Это можно исправить, если оставить композицию включенной, передав -webkit-transform: translate3D(0, 0, 0) родительскому элементу преобразованного элемента.

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }

<div>
  <span></span>
</div>

Проверьте скрипку: http://jsfiddle.net/UHLFF/