CODEWITHSUNDEEP
cssperformancelayout
paulb
paulb

Reputation: 784

CSS transform vs position

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

Upvotes: 55

Views: 39388

Answers (5)

GundarTB
GundarTB

Reputation: 1

The short and sweet answer is:

  • Create the initial DOM using layout properties (margins, paddings, left, right, etc..)
  • After the layout exists, use transforms if you need to move/animate items.

Animating layout items is not only harder on the rendering system, but also changes to the layout can change how elements stack, creating Layout Shift which Google will penalize you for.

Upvotes: 0

Guichi
Guichi

Reputation: 2343

As mention above: position:relative and translate can achieve the same effect in a different way

position:relative happen in the layout phase which means it can interact with other elements in terms of layout

while translate happens when all the layout process complete, further it even already painted, what is remaining is a matter where to put the element, so it has no interaction with the existing layout

consider the following example which will present an obvious visual difference by using the two methods

    .container {
        width: 300px;
        height: 300px;
        overflow: scroll;
        background: red;
    }

    .child {
        width: 280px;
        height: 280px;
        background: green;
    }
    <div class="container">
        <div class="child"></div>
    </div>

By setting position:relative;top:100px to the child element, the container has no enough space to hold the child, and because of the fact that overflow is set as scroll, the scroll bar will present

On the other hand, By setting transform:translateY(100px), it has nothing to do with the layout, so the scrollbar will not present

Like the spec said:

However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout

To conclude, position is involved in layout, while transform not, which means transform can have better performance.

prefer transform to position when the layout is not your concern

Upvotes: 8

tao
tao

Reputation: 90227

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.

Upvotes: 104

Daniel O&#39;Hara
Daniel O&#39;Hara

Reputation: 13438

top and left CSS properties work only on elements positioned relative, absolute or fixed. Also, top and left properties rely on the parent's position (relative it, absolute or static). Translations are not affected by that settings.

Translation transformations are "identical" to applying top and left when element has position: relative. In any other case they aren't the same operations.

Upvotes: 10

Kokos
Kokos

Reputation: 9121

Position is dependant on what the position is set to, transform works from the element itself. So you could see transform as being identical to position:relative;.

However, you can still use transform on an absolutely positioned element (to position it relatively without needing an additional element or resorting to margins), as well as transform being CSS3 so if you can use position instead you should.

Upvotes: 18

Related Questions