CSS translate3d Performance Hack

CSS transition performance

When I started out developing apps with Cordova / PhoneGap, there were several performance hacks I used to help CSS animations become smoother, i.e. force GPU acceleration.

The CSS transform hacks

Depending on the scenario, I’d usually adopt one of the following (and I’d be careful about which elements they were applied to):

1
2
3
4
5
6
7
8
.class {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
/* or */
-webkit-transform: translateZ(0);
}
1
2
3
4
.class {
-webkit-transform: rotateZ(360deg);
/* yep, this worked for me in the past! */
}

Memory allocation

These hacks were never a hard and fast rule, and as developers don’t have control over browser memory, it was easy to create memory issues.

Beware

After applying various permutations of these hacks to a game I’m developing with Cordova / PhoneGap, it appears that even using the hacks sparingly and with caution, the performance of the transitions are degraded.

Transitions are jerkier than without the hacks and it hits the performance of the native code when used in parallel (e.g. native transitions). It also forces font rendering to GPU control instead of the operating system rendering scheme, making text appear slightly pixellated on occasion.

Conclusion

In my opinion, with well developed apps and the latest browsers / hardware, these hacks are now redundant (and are likely to make things worse). The chances are, you probably don’t need to use them anymore.

To combat performance issues, you should look at other contributing factors, like the number of elements and use of intensive styles, such as box shadow.