Countdown breaks with zoom level different than 100%

[henriquecm]

After every transition the offset increases a little.

Only the Large text example seems to be working correctly a different zoom levels.

[saadeghi]

@henriquecm Honestly, I haven't seen it in different zoom levels before. Thanks for reporting!
The style and sizes are logically correct and I don't know why this happens. I will test more things to see if there's a way to fix.

[saadeghi]

bad news, it's an old bug on chromium

• https://stackoverflow.com/questions/54147708/difference-in-line-height-fixable-on-zoomed-view
• https://bugs.chromium.org/p/chromium/issues/detail?id=442084

I should probably look for another approach.

[Celant]

Hey @saadeghi! Did you manage to find an alternative way to handle this?

[saadeghi]

No. The only way would be using a long list of numbers in HTML instead of using :before. Something like:

<span class="countdown">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  .
  .
  .
  <span>99</span>
</span>

And that is not efficient at all 😕

[saadeghi]

I don't think there's a way to fix this on webkit I will re-open if I find a way

[saadeghi]

This bug is now fixed on webkit 🥳
Tested on latest versions of Chrome and Safari (MacOS)

[R3D2]

Maybe there is a regression because I have this same problem on webkit.

Also, it's not even showing on some components... Didn't see that at first, I mainly use Firefox.

EDIT : Font was text-2xs, changed to text-xs and it's not glitching anymore