# Why moving elements with translate() is better than pos:abs top/left

DevFeed: [Why moving elements with translate() is better than pos:abs top/left](<https://devfeed.tech/articles/why-moving-elements-with-translate-is-better-than-pos-abs-top-left-21678.md>)

Original publisher: [Read original article](<https://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>)

Author: Paul Irish

Published: 2012-12-20T08:00:00Z

Content type: article

Language: en

Sources: [Paul Irish](<https://devfeed.tech/sources/paul-irish.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [examples](<https://devfeed.tech/tags/examples.md>), [html5](<https://devfeed.tech/tags/html5.md>), [laptop](<https://devfeed.tech/tags/laptop.md>), [layout](<https://devfeed.tech/tags/layout.md>), [performance](<https://devfeed.tech/tags/performance.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [update](<https://devfeed.tech/tags/update.md>), [writeup](<https://devfeed.tech/tags/writeup.md>)

## AI overview

This article compares moving elements with CSS 2D transforms such as translate() against absolute positioning with top/left. Using Chrome DevTools evidence, it explains that transforms can move an element on a GPU-composited layer, reducing per-frame paint work and producing smoother animation, while noting that pixel snapping can sometimes make top/left appear visually preferable.

## Source excerpt

Update (2016): The more canonical writeup of this technique is at High Performance Animations - HTML5 Rocks. TL;DR: Only transform & opacity; never top/left! In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() using position:absolute and top/left Chris Coyier was asked why you should use translate. Go read his response which covers well why it's more logical to move elements for design purposes (with transform) independent of your element layout (with position). I wanted to answer this with Chrome and get some good evidence on what's going on. I ended up recording a video on the experience: It's a good watch and dives into Chrome DevTools' Timeline, compositing, paint cost, accelerated layers, and more... but if you want the abbreviated text version, read on: First thing, Chris made some simple demos to try things out: This sorta works, but there is such low complexity in this situation that it's all going to look pretty great. We need something closer to a complex website to properly evaluate the two (thx joshua for the macbook!): Now we're starting to get closer, but immediately I get distracted by something. Distraction: Pixel snapping If you run the demo above you might notice the top edge of the MacBook looks a little bit better in the top/left one. (And here I am writing a post about why translate is better! Preposterous!) So this is due to the absolute positioned macbook sticks to pixel positions, whereas the translate()'d one can interpolate at sub-pixel positions. One of the Chrome GPU engineers, James Robinson, called this the "dubstep effect", as these pixels appear to be getting pounded by bass. Here's a closeup of the effect... watch the top white edge of the macbook in each: On the left, you see stair-stepping down three pixels and back up again. This pixel snapping may result in a less distracting transition in this case, though this wouldn't be so noticeable if you were moving object