performance - CSS transform vs position

Question

Can some please explain to me the difference in transitioning the positional left or right properties or the -transform: translateX(n), as the both seem to achieve the same thing yet can be applied independently. I understand about the possibility of hardware acceleration but that's dependent on implementation.

// psuedo code;

#box {
    -transition-property: all;
    -transition-duration: 1s;
}

// javascript

box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";

What's the advantage of one over the other? Thanks,

p

Answer 1

The drawing order of rendering layers is:

• layout layer
• paint layer
• compositor layer

A redraw in a layer will trigger redraw in subsequent layers.

Changing left or margin will trigger a redraw in layout layer (which, in turn, will trigger redraws in the other two layers) for the animated element and for subsequent elements in DOM.

Changing transform will trigger a redraw in compositor layer only for the animated element (subsequent elements in DOM will not be redrawn).

The difference in performance (hence in frames per second or, in simple terms, in animation smoothness) is tremendous. Using the first technique will often result in jittery animations even on good machines (when the processor is busy), while the second will likely run smoothly even on systems with limited resources.

Another advantage of using transforms is compositor redraws are heavily optimized (animations to multiple elements result in one redraw for all), while changing layout layer will trigger a redraw after each change of each element.

For a more detailed explanation on rendering techniques and rendering performance I recommend Google's Web Fundamentals.