Question

When I apply WebKit transform change to the dom style attr, for instance:

Change from:

<div style="-webkit-transform: translateZ(0px) translateX(-9.609375%); "</div>

To:

<div style="-webkit-transform: translateZ(0px) translateX(-10.609375%); "</div>

Is this rendering change hardware accelerated? If it's supported in the browser, of course.

Was it helpful?

Solution

Webkit browsers will use hardware acceleration for 3D transforms, but not 2D transforms.

Here's a post that explains it: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

So yes, including translateZ(0) should force hardware acceleration for supported browsers.

As a side note, using 3D transforms on Android 2 devices doesn't work, so you'll have to stick with 2D.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top