CSS translation vs changing absolute positioning values

Question

Iv\'e been writing a webapp for iPad and other tablets and after a lot of viewport issues as far as proper and efficient positioning and animation is concerned. I recently c

Answer 1

Adding to Luca's point, here's two posts that test performance of translation vs position objects.

TLDR:

Using transform: translate(x,y); greatly increases paint times on elements with CSS transitions.

However, position: absolute; top/left will be faster if used on elements without transitions.

Why Moving Elements with translate is better than position absolute, top/left (Paul Irish):

Guidelines for animation:

• Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.

• If needs to be it’s JS-based animation, use requestAnimationFrame. Avoid setTimeout, setInterval.

• Avoid changing inline styles on every frame (jQuery animate()-style) if you can, declarative animations in CSS can be optimized by the browser way more.

• Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.

• Use Timeline Frame’s mode to investigate what is slowing down your behavior “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.

Myth Busting transform:translate vs position top/left (Tumult Blog):

Primary Conclusions

• Setting the top/left properties will be faster than using a transform if you are not using transitions.

• If the target is WebKit, the fastest frame rates will come from using transitions with the translate property, and forcing graphics acceleration for Safari/Mobile Safari (Chrome automatically does this).

• If compositing non-opaque items, forcing graphics acceleration in WebKit will have a huge performance boost in Safari/Mobile Safari and a modest boost in Chrome.

• If compositing only opaque items, forcing graphics acceleration in WebKit will have a negative impact on performance.

NOTE: In order to ensure GPU accelerated transitions in mobile browsers, use transform: translate3d(0,0,0). (http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/)