iPhone WebKit CSS animations cause flicker

I added -webkit-backface-visiblity and that mostly helped, but I still had an initial flicker after reloading the page. When I added -webkit-perspective: 1000, there was no flicker whatsoever.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Try this, and hopefully it will help:

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

body {-webkit-transform:translate3d(0,0,0);}

The actual answer for my case is here. Someone was close with: -webkit-backface-visibility: hidden; But the real answer is -webkit-backface-visibility: hidden; needs to be added to the parent div.

I had a problem with a "flickering" CSS transition as well. The animation in question was a menu sliding in from off screen, and just when the animation finished, the entire menu flashed/flickered.

As it turned out, this was caused by an actual iOS feature, the "tap highlight", which for some reason kicked in after the CSS animation finished (i.e. way after the actual tap), and highlighted the entire menu instead of only the element that was tapped. I "fixed" the issue by entirely disabling tap-highlight, as described here:

-webkit-tap-highlight-color: rgba(0,0,0,0);