CSS3 Transitions on Chrome and Firefox perform poorly in Optimus or Intel IGP configurations. How to fix?

This post has been updated to reflect more thorough research.

I have noticed that CSS3 performance is unusably worse than JavaScript when doing a variety of CSS3 transitions, including height or opacity transitions & animations in Firefox 5+ and Chrome (even the latest), specifically on platforms that have NVIDIA Optimus and / or Intel GMA / IGP graphics - including the latest Intel HD 3000. Here are some sample tests:

On Windows 7 64-bit, Intel Core i7 2720QM, NVIDIA GeForce 540 + Optimus (Intel HD 3000):

Firefox 7: 5 fps Chrome 15: 16 fps Safari 5.1: 40+ fps

I have observed that Firefox in particular defaults to using the integrated Intel Graphics (HD 3000 in this case) on Optimus systems - even when a significantly more powerful NVIDIA GPU is present, and Chrome seems to be hit-or-miss. Safari on the other hand is liquid-smooth, even on Windows.

I've tried forcing Firefox and Chrome to use NVIDIA in the NVIDIA control panel but even then it won't take.

Is anyone aware of a driver or browser fix for this situation? I've extensively tested s开发者_开发百科ystems with AMD / ATI graphics and they all perform admirably. Apple / Mac OSX systems also perform well. Even iOS outperforms Chrome and Firefox in CSS3 transitions.

I would suggest to take a different route. Bare in mind there are a large number of users who don't have graphics hardware that provide suitable acceleration.

Take a read, may help: [http://blog.mozilla.com/bjacob/2011/03/28/do-users-actually-get-hardware-acceleration/][1]

In regards to FireFox transitions i find the best way to tweak them is to speed up lagging transitions or remove completely if possible. Take a look at some high-end websites they tend to turn off transitions completely for FireFox in many cases.

javaScript has pro's and cons against css transitions/ animations, may be worth testing out a bit of basic jQuery to see if it makes a difference though I wouldn't recommend messing about too much with hardware acceleration as I assume you're trying to please all audiences and not just the ones with decent computers.

This is a browser + GPU drivers issue. As of this date, it seems to be corrected significantly in Chrome. Safari 5.1 still renders smoother than Chrome, but it is now clear that Google has done much improvement.