Minimum height of a single-line <input> is not interoperable with webkit/blink browsers
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox76 | --- | fixed |
People
(Reporter: jfkthame, Assigned: jfkthame)
References
Details
Attachments
(2 files)
See testcase. In Firefox (on macOS), the descenders of "g" and "y" are clipped in the last three examples (colored red), whereas in Safari and Chrome, those three elements all have significantly larger heights and do not clip descenders.
The heights of the elements are reported as:
Firefox Chrome/Safari
40px 40px
40px 40px
40px 47px
50px 59px
60px 71px
(Exact results will vary on different platforms depending on metrics of the platform's font.)
We have code in ReflowInput::CalcLineHeight that is relevant here: the comment tells us that "for Web-compatibility, single-line text input elements cannot have a line-height smaller than one." This is why we get heights of 50px and 60px for the last two elements, even though their specified line-height
remains 40px.
This matches what the HTML spec says:
the 'line-height' property, if it has a computed value equivalent to a value that is less than 1.0, must have a used value of 1.0.
However, it appears that what webkit and blink actually implement in this scenario is a different rule: "single-line text input elements cannot have a line-height smaller than normal
line-height for their font". As normal
line height is usually larger than 1 (typically about 1.2), this results in the larger heights seen in the testcase.
I think we should align our behavior with this, to improve interop and web compatibility; I just filed https://github.com/whatwg/html/issues/5366 to suggest modifying the HTML spec accordingly.
(For an example of a site that renders poorly in Firefox due to our current behavior, see https://github.com/webcompat/web-bugs/issues/47819. We've seen other cases that would similarly benefit, I believe.)
Assignee | ||
Comment 1•5 years ago
|
||
Updated•5 years ago
|
Comment 3•5 years ago
|
||
bugherder |
Description
•