Force Hardware Acceleration in WebKit with translate3d
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 */
-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:
There you have it; more power, less flicker. Happy animating!
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,...
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...