1656279 - Unitless line height interop issue

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

The placeholder text in the attached test-case is not centered in Firefox, but is in WebKit/Blink. If I drop the unitless line-height on the placeholder, then the renderings match, so this seems to be related to that line-height. This is causing the placeholder at snaptik.app to not appear vertically-centered.

Comment 1

[Sean Voisen (:svoisen)]

Seems unnecessary for line-height on ::placeholder but easily worked around. Triaging to S4.

ni? to jfkthame

Comment 2

[Jonathan Kew [:jfkthame]]

So AFAICS, it looks like Blink simply doesn't apply line-height to the ::placeholder pseudo.

Who's right?

According to https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder:

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

And checking https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line:

Only a small subset of CSS properties can be used with the ::first-line pseudo-element:
...

• word-spacing, letter-spacing, text-decoration, text-transform, and line-height

So MDN thinks line-height should work. But trying to chase this down in the W3C specs:

Starting at https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo:

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

So we check https://drafts.csswg.org/css-pseudo-4/#first-line-styling:

The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:

• all font properties (see [CSS-FONTS-3])
• the color and opacity properties (see [CSS-COLOR-3])
• all background properties (see [CSS-BACKGROUNDS-3])
• any typesetting properties that apply to inline elements (see [CSS-TEXT-3])
• all text decoration properties (see [CSS-TEXT-DECOR-3])
• the ruby-position property (see [CSS-RUBY-1])
• any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
• any other properties defined to apply to ::first-line by their respective specifications

AFAICT this does not include line-height, which isn't defined in any of the specs mentioned; it's still defined by CSS2 at https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height. I do wonder if this is an oversight, though, given that line-height can also be set as part of the font shorthand, so from that point of view it's covered by the first item here.

In addition, the spec then goes on to say:

User agents may apply other properties as well.

...which leaves things wide open! (But not interoperable.)

Interestingly, a quick test indicates that both Chrome and Safari do support line-height on ::first-line; so we might reasonably expect it to work on ::placeholder as well, but the spec doesn't seem entirely clear to me.

Probably worth seeking CSSWG clarification here. Given the behavior of ::first-line (where everyone supports line-height), and the fact that the spec says ::placeholder supports the same properties, I feel like what we're doing is arguably more correct.

Comment 3

[Jonathan Kew [:jfkthame]]

I filed https://github.com/w3c/csswg-drafts/issues/5379 about this.

Comment 4

[Stories Saver]

Unitless line height in CSS can lead to cross-browser compatibility problems, as it may be interpreted differently by browsers; using numeric values (e.g., "1.5") or specifying units (e.g., "1.5em") for line-height can help ensure consistent rendering across various browsers and devices.
Regards: https://storiessaver.org/

Comment 5

[TikTok To Mp3]

Unitless line height in CSS can sometimes lead to interoperability issues across different browsers. The CSS line-height property can be specified as a number, a length, a percentage, or as the "normal" value.
Regards: https://savefrom.ltd/en/tiktok-to-mp3

Comment 6

[Wang]

CSS 中无单位的行高有时会导致不同浏览器之间的互操作性问题。
https://snaptik.ac

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.