Smooth CSS transitions by forcing GPU rendering
Let’s say you have a CSS transition that takes an element and scales it two times on mouseover. Your code probably looks like this:
It’s all good in the hood until you come across a really complex DOM with a lot of things going on – then things usually get choppy and slower in older WebKits. That’s because your browser takes your 2D transition and forces it through your CPU. What to do in order to make it smooth?
Fortunately, there’s an extremely simple hack that allows you to force the browser to enable GPU rendering for CSS transitions – just take your code and tell the browser it’s actually a 3D transition even though it isn’t. The code after the change would look something like this:
(See this example on JSfiddle)
It has its drawbacks, of course – the screen might blink or lose colour profile when starting a transition, but hey – hacks aren’t called so without a reason :)