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);

Posted in: Tips, Web Design

10 thoughts on “Fixing CSS Transitions in Google Chrome Leave a comment

  1. Pingback: Fixing CSS Transitions in Google Chrome
  2. This doesn’t work for me. Chrome is the ONLY browser that can’t handle animations properly. It’s quite sad.

  3. Hi. Thank you for sharing all this useful info. In my case the problem was in a transition where transform was being used. So I used this additional property instead:

    backface-visibility: hidden;

    Yep! No more jumping effects!

  4. Simple trick, big impact. I was surprised I couldn’t smash the bug in chrome (worked in firefox). Luckily I found your post and the one css line did the trick. That’s in 2017, you posted in 2014, surprising how a bug can survive that long!

Leave a Reply

Your email address will not be published. Required fields are marked *