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 came up with the idea of using -webkit-transform for all my free floating elements. My question is, Would using the transformations provided by the CSS spec be better for smooth and reliable animations than for example changing the lrtb values inside position:relative elements? With hardware acceleration on, I'm finding random blinking happening in moving elements, especially during changes in orientation. (absolutely positioned elements) So, seeing as no notable blogs use this method, I wanted to check if there was some pro-tip reason it's a bad idea.

Incipient

Answer 1

it is possible to achieve better performances with transform rather than position.

I'll quote a few bits from this excellent article, but you should really read it to get the whole picture:

http://www.html5rocks.com/en/tutorials/speed/html5/

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:

transform: translateZ(0);

reason behind this, is that you delegate some of the work that the CPU has to do, to the GPU, however be considerate as this won't necessarily be always worth, especially on a mobile device like the iPad, that is your environment:

Please be warned that this applying this transformation does not guarantee to help your performance. It might simply crank up your GPU, use up more battery but deliver the same performance as before. So be careful with this technique and only use it if you experience a true performance win.

Misusage

My question is, however, how if I should use translations to manage my animations entirely or stick with setting, say left:XXpx;top:XXpx; for animation destinations. – Incipient

Answer 2

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

TLDR:

Using transform: translate(x,y); greatly decreases 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/)

Hibbler

What about an element that is not visible? – Orren

Answer 3

Transform works on the machine's GPU processing unit where as when an element is positioned, CPU takes care of computing the position, because it is part of the layout. transform elements are not part of the layout.

Rew