Mobile Safari Webkit Flicking Animation Fix

Back from a little vacation/job change/illness, lets get back to it.

While developing a web based app with some seriously smooth animations behind it I noticed that they would flicker every time they started. Initially I thought it was due to the animation enhancer I had installed. The jQuery animation enhancer seamlessly changes the traditional jQuery animations with the CSS3 animations. On a desktop browser this has mixed results, with safari being faster and chrome being slightly slower, but on an iOS device (in this case an iPad) it was much much faster.

Luckily the problem was not in the jQuery animation enhance plugin but a bug in the way that mobile webkit handles the animations. It seems to think there is some crazy Z animation as well (considering the animation I was doing as strictly Y directional this seemed even stranger) but the solution is to tell the browser where on Z that should be, I simple added the following to the animated elements styles in my stylesheet.

Snipplr: http://snipplr.com/view/61945/fix-webkit-css3-animation-flickers/

That little bit fixed the animations and made them nice and smooth, the look practically cocoa native and definitely steps up the quality of the project as a whole. While researching solutions I also came up with this one, however, even though it did not work for my particular application, I thought I’d post it in case the first method isn’t working for some reason.

Snipplr: http://snipplr.com/view/61945/fix-webkit-css3-animation-flickers/

As always questions below and I’ll see what I can do to help.

Leave a Reply

Your email address will not be published. Required fields are marked *