Chrome and Firefox view is not precise for small height

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 7 hours . ATP wants to to this question. 这个问题。

I'm trying to make a custom rounded underline with like so:

.underline:after{
   content: '';
   background: red;
   border-radius: 9999px;
   height: 3px;
   left: 0px;
   right: 0px;
   bottom: -3px;
}

 * { padding: 0px; margin: 0px; box-sizing: border-box; font-size: inherit; } body{ font-size: clamp(1.4rem, -0.5rem + 3.2vw, 2rem); padding:1em; } ul{ font-size: 3rem; list-style:none; flex-direction: column; color: red); align-items: center; position: absolute; background-color: white; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); border-radius: 18px; width: max-content; padding: 0.2em 0.4em; color:red; text-align: center; } li{ position: relative; }.underline{ text-decoration: none; }.underline::after{ content: ''; display: block; position: absolute; left: 0px; right:0px; height: 3px; bottom: 0px; background: currentColor; border-radius: 999px; }

 <ul> <li><a class="underline">hello</a></li> <li><a class="underline">hello</a></li> <li><a class="underline">hello</a></li> <li><a class="underline">hello</a></li> </ul>

The problem I'm facing is that the underlines height is not uniform, I don't care about the precise size of the underline (if it's 2px or 3px ) as long as them all to have the same height, while them all have 3px height in the sheets and when inspecting, some underlines seem shorter than the others, and measuring actually approves it.

the rendered image on chrome (it happens also in Firefox, didn't text other browsers):

the inspector values:

Screen ruler measurement result (after scaling):

The odd part is that it seems like it depends on the font-size or the a height, if I make the screen size 1280px + the underlines have same height, when I make it smaller it become "randomized", some have the same height and some not, and it change again when I decrease the screen width (the font size depends in the screen size, clamp(1.4rem, -0.5rem + 3.2vw, 2rem) ).

(it's very hard to reproduce the same conditions to see the problem)

Is this a bug? Is there a CSS rule to specify precision when rendering small elements?, is there a workaround?

Answer 1

That's a bug it happens to me all the time, you should try to user their Incognito mode so that you would be able to see if your code is working as it defines.