CSS3 Transform Animation Doesn't Render So Well In Safari/UIWebView

I'm developing an HTML5 app for mobile/touch device deployment and are utilising PhoneGap and only targeting the iOS platform for the moment (Webkit). My issue occurs with the CSS3

Solution 1:

It looks like the problem is that it's not animating the next item from the right (when moving up 1->2->n) but rather just '.show()'ing it when the previous item is done animating out.

Gimme a sec to step through the .js

...

Ok, I think I know what it is, what it's doing is, when it's moving right-to-left (numerically up) you can't see the new page (higher number) coming in from the left, because 'left' is moving from 100% -> 0% because the smaller number is moving out.

Ok, I think that's wrong...

If you change the 100% to 92.5% in the @-webkit-keyframes slideinleft and @-moz-keyframes slideinleft declarations then it should work for you, unfortunately I can't tell you why exactly as we (work) avoid CSS transformations as we do a lot of corporate work and so still need to support IE7+ and sometimes even 6 :(

Note that you can try a value other than 92.5% I just wanted to find the lowest sensible value that worked for you (95% didn't work)