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

There is good article: [Why Moving Elements With Translate() Is Better Than Pos:abs Top/left](http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) — micha_s, Aug 14 '14 at 12:51

score 83 · Answer 1 · edited Apr 21 '20 at 23:35

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.

score 16 · Answer 2 · answered Aug 18 '11 at 14:27

16

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.

answered Aug 18 '11 at 14:27

Kokos

9,051
5
27
44

I'm not really sure I understand what your saying. Let me clarify my position. It doesn't really matter what position is set to, the above example provides 2 different ways of do the same thing. This is surely something the CSS spec should avoid. – paulb Aug 26 '11 at 12:10

Daniel O'Hara · Answer 3 · 2014-09-17T10:53:33.377

9

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.

edited Sep 17 '14 at 10:53

answered Aug 18 '11 at 14:26

Daniel O'Hara

13,307
3
46
68

How is this any different than using a margin – GBa Aug 18 '11 at 14:32
1

Also worth noting that the performance when transitioning a translate value is far smoother than using a positional or margin value. – Dave Aug 20 '11 at 09:26
Performance is dependent upon browser implementation. I more interested in the philosophical reasons for what get included in the spec. – paulb Aug 26 '11 at 12:12
@WillDen Margin affects the layout where transforms don't. – J. K. Nov 27 '11 at 09:45
1

Performance test on various browsers: http://jsperf.com/translate3d-vs-xy/4 (top/left) is the fastest. – Kus Sep 26 '12 at 00:15
6

@Kus That test is absolutely useless. It is measuring the speed at which the code evaluates, it doesn't take into account browser rendering speed (repaints, etc.). – George Reith May 09 '13 at 13:18

Guichi · Answer 4 · 2020-11-30T06:55:04.303

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

Either your answer isn't quite accurate, this has recently changed, or I'm doing something wrong. In Chrome Version 103.0.5060.134, I'm getting scroll bars being added in with both position relative and translateY. I created a fiddle to show: https://jsfiddle.net/dillydadally/r95L0tjw/ — dallin, Jul 27 '22 at 00:51

CSS transform vs position

4 Answers4

Linked

Related