Force Hardware Acceleration in WebKit with translate3d

By David Walsh on March 12, 2012

Ever notice an odd flicker within WebKit-powered desktop and mobile browsers, or simply want to use hardware acceleration of a given device? There's a really neat trick you can use to force hardware acceleration!

The WebKit CSS

/* warp speed ahead */
.animClass {
	-webkit-transform: translate3d(0, 0, 0);
	/* more specific animation properties here */
}

The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem:

.animClass {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

There you have it; more power, less flicker. Happy animating!

Recent Features

Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each...
An Interview with Eric Meyer
I've always wanted to interview Eric Meyer. His early CSS books are a big reason this blog exists today and the reason why I'm a web developer. Eric gave me some time to hit the history of CSS,...
Animated 3D Flipping Menu with CSS
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an...

Incredible Demos

Create WordPress Page Templates with Custom Queries
One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the...
Create a Simple Slideshow Using MooTools, Part III: Creating a Class
In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Create a Simple Slideshow Using MooTools, Part II: Controls and Events, I showed you...
Dynamically Create Charts Using MooTools MilkChart and Google Analytics
The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript...

Discussion

K Huehn
The second set of styles doesn’t work in Chrome… there’s a bug that causes flickering and disappearing elements.

Dmitri
I believe this bug has been fixed in the new version of Chrome.

Dmitri
I’ve been using a lot of David’s tips and snippets. Here’s my contribution:

I’ve been working real hard on revamping my site with some fresh and came across some discoveries.
@K HUEHN and Mr Walsh: there are some issues with Chrome and hardware acceleration. Sometimes it is amazing at speeding things up, but sometimes it is a nightmare as it slows everything down and causes flickering. One example is browser window resizing. For example, compare current page (no hardware acc) and http://davidwalsh.name/ – now try resizing them. Notice how the images on the right have refresh fps of about 1. That sucks. Now here is the code that fixes that:
```
window.addEvent('resize', function(){
$$('*[style*=-'+Browser.prefix+'-transform:translate3d(0, 0, 0)').setStyle('-'+Browser.prefix+'-transform', '');
});
```
What it does is simply kills all HW acceleration on window resize. You can use this code on any events that perform worse to roll back to good ol’ software way.

Dmitri
Sorry, forgot to mention that Browser.prefix needs this to work:

Browser.prefix = (Browser.firefox) ? 'moz' : (Browser.safari || Browser.chrome) ? 'webkit' : (Browser.opera) ? 'o' : 'ms';

James Wakefield
Using translate3d creates strange behaviour in HTC mobile devices. I came across the problem when debugging a mobile site on an Android 2.3.5 HTC Desire. The translate3d on the parent element was preventing the keyboard from loading on a HTML form input element.
Raymond Uphoff
I found out that it even helps with jQuery-animations. On my test-server i’m working on some jQuery slideUp and slideDown functions. In webkit I saw a weird shift in the text during animation. So tried your hack/ fix and works wihout wiers text shift at end of animation.

I’ve done this by a LESS-mixin in 320 an Up-biolerplate;
```
.webkitForceHardwareAcceleration() {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
```
Ezekiel Gabrielse
It’s worth noting that using -webkit-backface-visibility: hidden can cause iPad browsers to crash. More info that I’ve found on this issue is [here](http://dontwakemeup.com/webkit-backface-visibility-and-browser-crashing/).