notes from a passionate developer





This is a personal blog. The opinions expressed here represent my own and not those of my employer, nor current or previous. All content is published "as is", without warranty of any kind and I don't take any responsibility and can't be liable for any claims, damages or other liabilities that might be caused by the content.

Chunky transformations on iPad - force hardware acceleration

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!


View Comments