When hovering over the nav links at the top, an underline effect is animated (through transition). During that brief 0.2s transition, the pink text "ABC" in the lower corner of the cards appear to momentarily reduce the font weight. If I remove the box-shadow from the card class, the visual glitch goes away.

This happens in chrome and Edge, but not Firefox. So I'm thinking some kind of chromium rendering bug.

While not game-breaking, it is an unwanted side-effect. Does anyone have any insight or solution?

edit: The visual bug was apparent in the code preview on this page, but viewing it embedded it doesn't happen. So here's a fiddle just in case: https://jsfiddle.net/yjf80Lrv/

body { background-image: linear-gradient(black, black); background-attachment: fixed; color: white; } b { position: relative; } b::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 100%; height: 2px; background-color: mark; transition: transform 1s ease; } b:is(:hover,:focus)::after { transform: translateX(-50%) scaleX(1); } i { position: absolute; color: #dd225f; /* just to make it more apparent: */ font-family: serif; font-size: 12px; } <b tabindex="0">hover me</b> <hr> <i>ABCDEFGHIJKLMNOPQRSTUVWX</i>

"Hover me" text ("trigger") and alphabet ("target") separated by horizontal line. While mouse cursor is above the trigger, animated underline appears and the target gets visually thinner text strokes, but only during the transition. After transition finishes (in either state) target's optical "weight" returns to normal.

myf's user avatar

myf

12.7k3 gold badges44 silver badges57 bronze badges

Phaelax's user avatar

5

Adding will-change:transform to the effected element fixes the "shifting" of the text. But this basically turns off the subpixel AA, making the text look like that lighter weight appearance. The fix below comes from copilot, scaleX() was the root cause. It forces GPU promotion which forces text re-rasterization which changes antialiasing which caused the text to appear lighter. Switching the animation from using transform to width then the browser no longer needs to promote layers and the text stays as it is.
I'm not even going to pretend I fully understand that, but it worked. Hate to admit it but AI gets +1

body { background-image: linear-gradient(black, black); background-attachment: fixed; color: white; } b { position: relative; } b::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transform-origin: center; width: 0%; height: 2px; background-color: mark; transition: width 1s ease; } b:is(:hover,:focus)::after { width:100%; } i { position: absolute; color: #dd225f; /* just to make it more apparent: */ font-family: serif; font-size: 12px; } <b tabindex="0">hover me</b> <hr> <i>ABCDEFGHIJKLMNOPQRSTUVWX</i>

Phaelax's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.