Fixing CSS Transitions in Google Chrome

I had a weird problem yesterday where I had applied a css transition to an element that was fading from opacity:0.1 to opacity:1 – and along the way it seemed to change in size or position.

The reason for the change in size is that the element had a percentage width and so wasn’t using a whole pixel size (ie it was 165.65 pixels wide) – however during the transition it rounded the width of the element which created the undesirable jumping effect.

This problem seemed to be limited to Google Chrome and after some Googling around I discovered that forcing Chrome to hardware accelerate the transition also fixed the css transition bug.

Forcing Hardware Accelerated Transitions?#

Certain css transitions will be hardware accelerated. What this means is that they will use the power of your computers graphics card to apply the transitions – and since the graphics card is optimized for graphical effects, this makes the transitions much smoother.

The thing is transitions don’t always use hardware acceleration, but if you apply a specific css rule then they will force it to enable. One of the css properties that will enable hardware acceleration is the transform rules. So apply a css transform and the graphics card does all the work.

Fixing the Bug#

So in the end all I had to do was apply the following css rule (which otherwise makes no visible difference to my css element) and the problem was fixed!

-webkit-transform: translateZ(0);

Ben

Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.