Line-height won't scale below 9px when using rem units.
Reported by
crazyto...@gmail.com,
Jul 14
|
||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Steps to reproduce the problem:
1. Create a span with text "Test"
2. Set the CSS like:
span {
font-size: .5rem;
line-height: .5rem;
}
3. Check Computed Style under Elements tab.
What is the expected behavior?
Expected behavior is font-size and line-height computed values to match. With standard 16px root height, this would mean 8px for both.
What went wrong?
Actual line-height is 9px, while font-size is expected 8px.
Did this work before? N/A
Chrome version: 67.0.3396.99 Channel: stable
OS Version: OS X 10.13.5
Flash Version:
It appears the line-height won't dip under 9px when being set via a relative unit. Originally discovered with CSS like:
html {
font-size: 50%;
}
span {
font-size: 2rem;
line-height: 2rem;
}
With the above, the line height is 18px, while font-size is 16px. Confirmed that they start to drift when line-height should go under 9px (before expanding back out to 2rem), thus making it compute as 18px. If I change the above to:
html {
font-size: 8px;
}
span {
font-size: 2rem;
line-height: 2rem;
}
line-height computes to 16px, as expected. So it seems like line-height doesn't want to go under a root value of 9px when root value is determined through relative unit like percentage or with a rem unit on the element itself if root unit hasn't been changed.
The following :
html {
font-size: 56.25%;
}
span {
font-size: 2rem;
line-height: 2rem;
}
they match. But with :
html {
font-size: 56.2%;
}
span {
font-size: 2rem;
line-height: 2rem;
}
They start to drift, with line-height holding at 18px.
,
Jul 19
Thanks for filing the issue! @Reporter: Could you please share a sample test file with the above mentioned conditions, which helps us to triage it in a better way. Any further inputs from your end may be helpful.
,
Aug 13
Thanks for the report. I can confirm repro on OSX Chrome 68.0.3440.84 and 70.0.3518.0, using both 'rem' and 'em'. When the parent element's font-size is set explicitly, the problem goes away. DevTools is just reporting the computed style here. Fonts team, could you please take a look? Is this somehow intended?
,
Aug 20
Yes, chrome has a concept of a minimum font size (exposed as a user setting) and in many cases won't allow scaling below it. This is likely working as intended but please verify by modifying the user setting to confirm.
,
Aug 20
Having a minimum font size is fine, but if it's going to apply to the font size, it also needs to apply to the line-height. If 1rem is going to be limited to 8px for font-size, then it should mean the same thing for line-height. In other words, 1rem should not mean different things depending on which css property it's being used in. In the original example, we see that "font-size: 1rem;" gets computed to 8px, while "line-height: 1rem;" gets computed to 9px. I don't see how this could be working as intended. A rem is supposed to equal the font size of the root element, so if the font size is going to be limited by user settings, that's fine, but then that necessarily implies a cap on what a rem means.
,
Aug 20
Agreed, in regards to having the minimum font-size carry over to other properties that are relative to said-font-size (like line-height). Also, this becomes more confusing (I think) when you consider that an explicit (non-relative) font-size gets honored over the user's stated minimum font-size. As stated in the original report, the following:
p#pixels {
font-size: 8px;
}
p#relative {
font-size: .5rem;
}
<p id="pixels">
Test
</p>
<p id="relative">
Test Two
</p>
#pixels will render as 8px, while #relative will render as 9px.
Also, I created this bug based on findings reported on StackOverflow:
https://stackoverflow.com/questions/51334585/difference-in-chromes-rem-calculation-between-font-size-and-line-height-on-mac
Where the OP indicated the font size rendered correctly on Windows but not on macOS. Is this because Windows has a smaller default minimum font-size? Or doesn't have this feature at all? It could be the OP's Windows version of Chrome had minimum font-size set to 4px and they didn't realize the significance of this setting between browsers. Can someone test if they are getting the same behavior in Windows and macOS (assuming minimum font-size in browser settings match in both)?
,
Aug 27
,
Aug 27
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by viswa.karala@chromium.org
, Jul 17