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

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Related Posts

29 Nov 2012

CSS Highlight Colour

When I design a website I really like to add small touches that most people won’t notice. In fact there’s a blog I follow that is dedicated to these small areas of delight. One of the things I like to...
25 Dec 2012

Learning to Accept CSS3: Creating CSS3 Windows

People are resistant to change. It’s strange since I consider myself quite forward thinking, but I still find it takes me a while to accept new things. I’ve been using CSS3 effects for quite a while now – as have...
14 Sep 2018

What’s the Deal with Google AMP?

I recently read an article title Google AMP Can Go To Hell, all about how Google AMP is an attempt by Google to control the internet entirely.When I first saw this article I thought it was going to be a...
03 Jan 2024

Foolproof Flexbox: Fixing Flowing Frustrations

I recently encountered a frustrating issue while using flexbox for a 2 column layout on Brush Ninja. One column could have any width, while the other had a fixed width for a skyscraper advert. However, I faced a problem where...