Wrong line-height in input field when using Open Sans
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
People
(Reporter: scourtois_github, Unassigned)
References
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0
Steps to reproduce:
Hi,
I created a page using the Open Sans font, added a text input and gave it the following style:
.my-input {
line-height: 1rem;
border: 1px solid black;
font-family: inherit;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
A codepen of the page can be found here: https://codepen.io/happynoff/pen/OJoaZzg
I have tested this with Firefox 111 and 113 on macOS Ventura 13.2. Same result.
Thanks! <3
Actual results:
The computed line-height of the input is 17px. I comes back to 16px when removing Open Sans.
Expected results:
I would expect the line-height to remain at 16px regardless of the font.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
Reporter | |
Comment 3•2 years ago
|
||
I suppose it's a consequence yes. The thing is, under Chrome and Brave, the behavior is that the line-height is 16px. I just looked in Safari and it does indeed the same thing as Firefox 🤔
|
|
Reporter | |
Comment 4•2 years ago
|
||
The issue with this is that it breaks the design if the font changes. With a default font the whole input is 26px. With Open Sans it's 27px. I would not expect the font to influence the size of the whole element in this way 😕
|
|
||
Comment 5•2 years ago
|
||
The severity field is not set for this bug.
:alaskanemily, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Comment 6•2 years ago
|
||
This is specified in https://html.spec.whatwg.org/#the-input-element-as-a-text-entry-widget:
For input elements whose type attribute is in one of the above states, the used value of the 'line-height' property must be a length value that is no smaller than what the used value would be for 'line-height: normal'.
And it is needed for compat... So this is somewhat unfortunately expected. Also, at least here, it matches what Chrome and WebKit do (Chrome on my machine also shows 17px using Open Sans fwiw).
Description
•