Speeding Up CSS3 Transforms on Mobile

In my previous post about making a standalone single file Web app, there was a gotcha. The demo worked fine on the desktop, but the performance was abysmal on mobile. The nice, animated transitions were chopping, stuttering and sometimes simply jump from start to finish. To a certain extent I could understand why. A mobile browser is pretty limited by the hardware it’s running on. But in general webkit mobile browsers seems very capable.

I did some research on transform and learned something. Whereas 2D transforms are render by the browser, 3D transforms are hardware excellerated. I went back to my CSS and updated it to use 3D transforms, leaving the z value at 0. When I uploaded this to the server and hit it from my phone, voilá, I got the smooth sliding transforms on mobile that I was expecting. So, if you’re going to do a traslate, rotate or skew, use the 3D version. Just leave the z value at 0. For example, previous I was using CSS3 like this to move something:

article {
    -webkit-transform: translate(100%, 0%);

This would work fine on the desktop, but was terrible on mobile. In the above example the first value is for the x or horizontal position and the second is the y or vertical. Since the x value is 100% it would move the element 100% to the right.

By using 3D transforms I could get decent performance on mobile handsets:

article {
    -webkit-transform: translate3d(100% ,0%, 0%);

If you’re only doing 2D transforms, leave the last, third value at 0%. This will be off-loaded to hardware for rendering, giving you the performance you would expect on phone and tablets. I’ve updated the example code online to use the 3D transforms, which you can download.

About Robert Biggs
Front end Web developer skilled at creating interactive, dynamic interfaces using HTML5, CSS3, JavaScript, SVG. Passionate about developing awesome user experiences in the mobile space.

Comments are closed.

%d bloggers like this: