CODEWITHSUNDEEP
google-chromecss
Litek
Litek

Reputation: 4888

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

Upvotes: 21

Views: 9994

Answers (1)

Parker Ault
Parker Ault

Reputation: 3426

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/

Upvotes: 24

Related Questions