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 systems 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.
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.