1714631 - Misaligned input placeholder

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Leonardo]

Attachment: Captura de tela em 2021-06-04 14-18-11.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Today my Firefox was updated to version 89.0. I see there's a new implementation for web forms. See the attached screenshot.

Actual results:

The placeholder is aligned to the top (first field) while the text content (second field) is correctly aligned to the center.

Expected results:

Both placeholder and content should align to the center. The same code works fine on Chrome.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Can you link to that site or attach an HTML file that repros the issue? Thanks!

Comment 3

[Leonardo]

Attachment: form.html

Comment 4

[Leonardo]

That's not my code, and as I was trimming it down to post here I realized they used a "input::placeholder" selector to style the placeholder. If we remove "line-height: 22px;" from this selector, then the placeholder is correctly aligned. I don't know what should be the expected behavior, but the point is that the text content and the placeholder don't seem to be following the same positioning rules.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Thanks, that's very useful. This is because the placeholder is an internal element to the <input> (you can see this if you go to about:config and change devtools.inspector.showAllAnonymousContent=true), which by default has line-height: -moz-block-height. The code here is overriding it with a line-height value which is different, which causes the positioning issue.

This doesn't seem like a recent regression... Perhaps we could consider making this rule important, as other browsers also don't seem to allow you to change the line-height of the ::placeholder (or at least in Chrome if I set 50px or something the rendering is the same).

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1714631 - Make input placeholder line-height declaration important, to match other engines. r=#layout-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1a2b6b35c69b
Make input placeholder line-height declaration important, to match other engines. r=jwatt

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/012f302cf03b
Fix test_placeholder_restrictions.html

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3571fd3cb3bc
Move an NS_ASSERTION to the right place so it doesn't fire incorrectly.

Comment 10

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/1a2b6b35c69b
https://hg.mozilla.org/mozilla-central/rev/012f302cf03b
https://hg.mozilla.org/mozilla-central/rev/3571fd3cb3bc

Comment 11

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29252 for changes under testing/web-platform/tests

Comment 12

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot