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 */
.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!
![39 Shirts – Leaving Mozilla]()
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...
![6 Things You Didn’t Know About Firefox OS]()
Firefox OS is all over the tech news and for good reason: Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript. Firefox OS has been rapidly improving...
![Record Text Selections Using MooTools or jQuery AJAX]()
One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google...
![Growl-Style Notifications Using MooTools Roar]()
When I think of premier MooTools plugin developers, Harald "digitarald" Kirschner is usually one of the first people that come to mind. Harald has built some of MooTools' most popular plugins, including AutoCompleter, FancyUpload, and History Manager. My favorite plugin created...
The second set of styles doesn’t work in Chrome… there’s a bug that causes flickering and disappearing elements.
I believe this bug has been fixed in the new version of Chrome.
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.
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';
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.
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; }It’s worth noting that using
-webkit-backface-visibility: hiddencan 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/).I’ve now had two difficult bugs that came out of this technique, both related to positioning. I think this is a very cool trick, but it does cause some unexpected problems. And, for what it’s worth, it did not solve the one very notable animation shake I came across in a company site.
Hey, is anyone able to help me troubleshoot? I’m having this exact issue but can’t seem to fix it. I’ll pay