Does translate3d always force hardware acceleration or only on translate properties?

Question

So lets say I have a page with an element being animated on the left property. If I just add a translateZ of zero, is that enough to force hardware acceleration on mobile devices? Will I gain anything in terms of hardware acceleration / GPU by using translateX instead of left?

Answer 1

First of all, I would like to point out that translateZ(0) isn't a cross-browser solution for smoothing animations through GPU acceleration, and GPU acceleration shouldn't be used careless, for it is pretty expensive.

That being said, when it works, it won't work just for translate properties, so the short answer is yes, it works for all properties.

In your example, you can see clearly an improvement on using translate instead of left because translate doesn't trigger a layout (causing your page to recalculate the elements positions) every frame. Keep in mind that using a light-weight property such as translate to animate an element have far more performance than using an expensive one with GPU acceleration.

You can find on css trigger wich properties are less expensive to animate.

Answer 2

I found the answer - it only accelerates the transform properties, not left. Here are example fiddles to demonstrate.

Combination of left and translateZ - its choppy on mobile Combination of translateX and translateZ - its smooth!