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

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.