Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line height rendering issue on Chromium 94+ and higher, and Firefox.

See original GitHub issue

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

Hey guys,

Not sure if you were aware, but starting with Chromium 94.0.4584 and higher, the Chromium got a fix related to the way they were calculating line-heights: https://chromium-review.googlesource.com/c/chromium/src/+/2824938

This change affects all Blink based browsers (Chrome, Edge, Opera, etc), but also Firefox.

Safari is NOT affected by this.

So what happens in recent versions, they’re including the subpixels of line-height (when a line height has subpixels) when calculating the container’s total height.

This comes with an unexpected behavior, which breaks any pixel perfect designs when using classes that have a line-height set to a ratio based unit, unless the line-height value calculated happens to be a number with no decimals.

I’ve created 2 simple tests that which can be seen at:

16px base font on the Browser’s settings: https://codepen.io/pricop/pen/ExwWZJZ 17px base font on the Browser’s settings: test: https://codepen.io/pricop/pen/bGoqgZJ

I’ve took screenshots of each of them, and measured what the browser has rendered, and the results are as follows:

16px results: https://i.imgur.com/swLGjh4.png 17px results: https://i.imgur.com/h3eOZZi.png

The culprit in this particular case, is the “small” helper class that Boostrap includes. This class has the font-size set to 80%. When a browser has the default font size set to 16px (which is what the vast majority of browsers have), the line-height in newer versions will not be floored, as in previous versions, so rather than the line-height being calculated at 19px, it is now calculated at 19.2px, which causes the issues presented in the results.

The fix would be have the line-height for classes that are using ratio based values (such as small, display-*, etc. classes) to a value with no decimals when the browser’s calculates it.

This issue can be followed at: https://bugs.chromium.org/p/chromium/issues/detail?id=1278566 - but by the looks of it, this is something that’s here to stay, and I’ve been instructed to adjust my CSS instead.