Line height rendering issue on Chromium 94+ and higher, and Firefox. #35553
Comments
|
Can you please drag and drop the screenshots you linked into a github comment? First of all I have no reason to trust imgur. Secondly, their servers are apparently too busy anyway so I can't see the images. |
|
|
|
I see a computed height of Do you still see this with the latest Chrome? Is it the computed height shown in inspector tools that's the issue, or a rendered height that's different than that shown value? |
|
I hope you're doing well. Yes, the issue persists with the latest version of Chrome. Safari still does line-height clamping like Chrome used to do (which was to round down the computed height), but they'll probably eventually switch to the same render method Chromium and Gecko do. The 69.2 height value that you're seeing, is the correct computed height. However, since the browser can't render .2s of a pixel, it rounds the number when rendering some of the rows, and the remaining sum of decimals are being added (I presume arbitrary) to other rows so that the final container has the correct height. In the example provided, the By setting the Boostrap 5 already uses REM units and is not affected by this. I see no reason why this couldn't be backported to Bootstrap 4. |
|
Want to open a new PR to change the small font-size? |
This is a backport from BS5 to BS4. As per twbs#35553 The ```small-font -size``` will actually increase from ```13px``` to ```14px``` with this proposed change. Personally I'd prefer keeping it the BS5 way (```14px```), as the text is more readable now. If it's needed, I can do another PR with the ```$small-font-size: .8125rem !default;``` to resemble BS4 more closely but I feel like this would be a move forward even for BS4.
|
Done. |
This is a backport from BS5 to BS4. As per #35553 The ```small-font -size``` will actually increase from ```13px``` to ```14px``` with this proposed change. Personally I'd prefer keeping it the BS5 way (```14px```), as the text is more readable now. If it's needed, I can do another PR with the ```$small-font-size: .8125rem !default;``` to resemble BS4 more closely but I feel like this would be a move forward even for BS4.
and others
Prerequisites
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-heightvalue 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-sizeset to80%. 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 theline-heightbeing calculated at19px, it is now calculated at19.2px, which causes the issues presented in the results.The fix would be have the
line-heightfor classes that are using ratio based values (such assmall,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.
Reduced test cases
https://codepen.io/pricop/pen/ExwWZJZ
https://codepen.io/pricop/pen/bGoqgZJ
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
4.0.0 but it affects all the others.
The text was updated successfully, but these errors were encountered: