Search code examples
webkitwebkit-transform

Is WebKit inline transform hardware accelerated?

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.

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.