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;}

Comments are currently closed.

1 comment. Comments are closed for this entry.

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