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.

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/)