With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it’s still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I’m quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I’m using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it’s performance. Sometimes it’s ok, sometimes it’s not.
I have uploaded an example… Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example…
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It’s made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it’s still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.
Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html