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);
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.