Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome flashes black screen when using css transition rotate

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

like image 206
Litek Avatar asked Jan 18 '12 12:01

Litek


1 Answers

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/

like image 115
Parker Ault Avatar answered Oct 18 '22 00:10

Parker Ault