1

I wrote some animations using CSS3 transitions and it works well on desktop browsers, but when I tried to use it on iPad it does this weird flickering after the animation is done. Here is the link to the example:

http://codepen.io/EugeneGordin/full/LFBkn

I already applied backface-visibility and translate3d, and while they helped it has not removed the flicker. I have also removed any references to z-index and display: none, so I'm at a loss for further exploration.

I'm animating about 15 divs with translate3d and a few others with opacity, so I don't feel like I'm pushing the limits of what the hardware can handle. FWIW, I have tested on the micrososft surface and the animations look smooth there.

I would appreciate any help!

Community
  • 1
  • 1
Eugene Gordin
  • 4,047
  • 3
  • 47
  • 80
  • 1
    I suspect that this is simply an problem with the way mobile Safari (or, rather, mobile WebKit, as this seems to occur in iOS Chrome as well) renders CSS3 animations. I think the only solution might be reporting the bug to WebKit's developers, and waiting for a patch. – Jules Jan 20 '13 at 03:51
  • yeah...I think the same way, cause I really tried lots of different things and nothing helped...it works just fine on Surface! but under iOS it just doesn't want to work normally :((( – Eugene Gordin Jan 20 '13 at 06:32

0 Answers0