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.

Answer 2

You should definitely use -webkit-transform rather than -webkit-transition. With that said, for cross-browser support and ease of use, I would definitely go with a plugin such as jQuery Transit that allows you to easily create smooth, native-like transitions and effects on iOS as well as Android and other mobile devices.

Example JSFiddle of jQuery Transit in action

Code Example:

HTML:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

Someone else has pretty much done the hard work for you. I can't stand tinkering with CSS3 animations and this plugin does its job amazingly. I have tested this with an iPad, iPod Touch, iPhone, and Android. I love the native feel it gives.