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
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With