when webkit css animations causes flicker

Sunday, June 19, 2011

sometimes when using -webkit-transform:translate3d; or -webkit-transform:translate; on elements visible on the page, it causes the screen to flicker. In my particular case I had a menu that opened as an overlay, and whenever an element with translate3d was on the page, the menu flickered badly when fading in.

The solution seems to be to set backface-visibility to hidden for the menu element, like so:

#menu {-webkit-backface-visibility: hidden;}

1 comment so far. Go ahead, write something

You can follow any responses to this entry through the RSS feed

Thank you so much for sharing this. How did you discover the solution? That seems like a pretty obscure property.

#1 Jake Mauer 18 Nov 11

Type here: