Flickering CSS Transformations
14 years 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.
Edit:
I forgot to update this post with some of the new techniques i use when running into an issue like this. I currently use Safari with Debug mode enabled, you can enable debug mode by running the following command:
after this is enabled in safari you can display compositing borders:
Safari > Debug > Show Compositing Borders
with this enabled you should now see whats being composited!
red = compositing layer with the number of recalculations
yellow = container layer
cyan = overflow box
green = tiled layer (if width or height is > than 1024px)
with these new insights you should be able to figure out what to throw into hardware acceleration and what shouldn't be there.