chad scira

Flickering CSS Transformations

11 months ago

So basically this bug only happens in Safari Windows and Safari Mobile. In Safari Mobile you will just see your animations flickering a bit every now and then. But in Safari Windows if the animation is in an iFrame the page containing the iFrame flickers too... Which is horribly noticeable.

I kept searching for a solution but couldn't figure it out, I was using transformX(x) and transformY(y) instead of transform(x,y). By doing this you can take advantage of the hardware acceleration that safari offers.

So I eventually drilled the issue down to hardware acceleration and 3d transformations even if you are not taking advantage of the z-axis. So I took a look at the CSS 3d transform properties and started disabling things I didn't need. One of them was backface-visibility, when set this property to hidden. The flickering vanished, now this is only a solution if you are only doing 2d transformations, and trying to use hardware acceleration.

Additionally to setting backface-visibility to hidden it also helps if you set the perspective to 1000.

Hopefully someone else that is banging their head against the wall because of this issue finds this blog post useful.