Closed Bug 1623124 Opened 5 years ago Closed 5 years ago

Minimum height of a single-line <input> is not interoperable with webkit/blink browsers

Categories

(Core :: Layout: Form Controls, defect, P3)

defect

Tracking

()

RESOLVED FIXED
mozilla76
Tracking Status
firefox76 --- fixed

People

(Reporter: jfkthame, Assigned: jfkthame)

References

Details

Attachments

(2 files)

Attached file testcase

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: nobody → jfkthame
Status: NEW → ASSIGNED
Pushed by jkew@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/8e3cf2cbb2dc Min used line-height for a single-line input element should be the font's 'normal' line-height. r=dholbert
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla76
See Also: → 1824093
Duplicate of this bug: 1541964
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: