Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
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);
This did the trick for my transition issue, too. Thanks for the insight!
This doesn’t work for me. Chrome is the ONLY browser that can’t handle animations properly. It’s quite sad.
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!
Thanks for the comment and the tip! 🙂
This worked wonderfully. I was starting to get quite frustrated. Thank you for sharing this!
you save my project. thanks you Ben ^^.
Thanks you Ben!
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!
Maybe it’s a feature? 🙂 Glad it helped anyway.
Also fixed it for me. Thanks 🙂
Add to the parent transform-style: preserve-3d;
Awesome fixed my problem 🙂