Just learned something new today, while working with simple two dimensional CSS fade and swipe transitions for iPad. Looking at them in the desktop webkit browser, everything ran smoothly. When looking at them on the iPad, it looked awful. My first thought was that the javascript event-loop controlling the timeline of the animations was out of sync with the time it took for the CSS transitions on the iPad. Wrong! The solution was to force hardware acceleration by making the transitions to work in three dimensions.
If you search (google) for it, you will find various hacks. For me it was as simple as this:
-webkit-transform: translate3d(0,0,0);
Other hacks reported that I’ve seen:
-webkit-transform: translateZ(0px);
as well as:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
Nothing new, but new for me.
Happy coding!
//Daniel