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!
Back in late 2012 it was not easy to find open source projects using