iPhone WebKit CSS animations cause flicker

Question

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/

After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around.

The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??

Answer 1

Even though I had -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden the flicker was still happening.

In my case the cause was the z-index. Increasing it on active element did help.

Answer 2

Instead of applying the transition to "all" just specify the one you really need. It removed the flickering on my case.

Answer 3

for me, flickering issue on safari solved by removing will-change: transform; to the animated element.

also I could solve this issue by adding overflow: hidden; to the parent, but with this, all elements with transform: translateZ() got ineffective

Answer 4

I tried all the above and still had major flickering problems on Firefox and Chrome. I fixed it, or at least greatly reduced it to an acceptable issue by removing the box-shadow transform that was causing many repaints during the animation. I followed this and modified for my needs:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Answer 5

If anyone finds that backface-visibility is not working, you might look at the properties already on your animated element. For us, we found that overflow-y: scroll on an absolute or fixed positioned element was causing major flickering on iOS.

Simply removing overflow-y: scroll fixed it.

Answer 6

Try this, and hopefully it will help:

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