Question

Transition rotate causes chrome to flash black screen. Is it a Chrome bug (works fine in Safari) or it can be fixed with some clever 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>

Example fiddle here.

The problem with this problem is that it doesn’t occur every time so you’ll have to hover the gray square several times and you should see the screen blinking in black.

Tested in:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0

Works fine on:
Safari 5.1.2 (6534.52.7)

All test on Snow Leopard

Answer 1

You can fix this by forcing compositing to stay on by giving -webkit-transform: translate3D(0, 0, 0) to the parent of the transformed element.

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>

Check out the fiddle: http://jsfiddle.net/UHLFF/