Improve CSS3 speed on iPad

Question

iOS overall tends to suck with CSS3 transitions, animations, transforms, etc. Which IMO are some of the best features of the tech.

Now, I've heard that you can trick iOS into initializing its hardware acceleration by throwing in some random 3D transforms and what not. So I transformed a random div and put it on screen (didn't even hide it), and the experience still chugs along...

Is there any way to improve the performance of CSS3 transitions, transforms, animations, etc. on the iOS? Or are web apps doomed to be plastic-y knock-offs of native apps?

Edit: Here's the offending code...

http://www.abhi.my/sl/html/

Just follow that link, and you'll see a little demo I put together... The animations are smooth and acceptable when viewed on a desktop browser, the same site on the iOS suffers... This one was intended for the iPhone 4...

Feel free to go through the source and point things out...

Answer 1

3D transforms are hardware-accelerated on iOS, so all you have to do is use the 3D syntax whenever you're doing it, and it performs great - at least on 3GS and above.

But you are not using transforms in your example, you are using a transition on position, which is completely different, and yes - results in crappy fps on mobile.

Instead, you should be using -webkit-transform: translate3d(-100%,0,0) (or a suitable analog). You can see how much smoother this is from the example in this page.