El cromo parpadea en la pantalla en negro cuando se usa css transition rotate

Question

La rotación de la transición hace que Chrome destelle en la pantalla en negro. ¿Es un error de Chrome (funciona bien en Safari) o puede corregirse con algún css inteligente?

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>

Ejemplo fiddle here.

El problema con este problema es que no ocurre todas las veces, por lo que tendrá que desplazarse varias veces sobre el cuadrado gris y debería ver la pantalla parpadeando en negro.

Probado en:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0

funciona bien en:
Safari 5.1.2 (6534.52.7)

Todas las pruebas en Snow Leopard

Answer 1

Puede solucionar esto forzando a que la composición permanezca activada dando -webkit-transform: translate3D(0, 0, 0) al elemento primario del elemento transformado.

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>

Salida del violín: http://jsfiddle.net/UHLFF/