2057894 - Fidelity NetBenefits chatbot text-entry placeholder text is clipped on the bottom

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot

STR:

1. Visit https://nb.fidelity.com/public/nbpreloginnav/spa/fidelitywork/core/home (Fidelity NetBenefits log-in page)
2. Dismiss any cookie popup (accept or reject, doesn't matter)
3. Click the green chat-bubble near the bottom right of the page, with "..." (appears a second or so after pageload)
4. Look at the Type your question here placeholder-text (particularly the q)

ACTUAL RESULTS:
The descenders on y and q are clipped.

EXPECTED RESULTS:
No clipping.

Chrome 151.0.7896.2 (Official Build) dev (64-bit) gives EXPECTED RESULTS.

Firefox Nightly 155.0a1 on Android and Ubuntu (at least) give ACTUAL RESULTS.

Note: After a bit of interaction (e.g. typing and then deleting some text input in the textfield), the issue goes away (the placeholder text shifts upwards a bit)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of expected results (after typing/deleting some text input)

Comment 2

[AutoWebCompat]

Attachment: Reproduction steps generated by autowebcompat bot

Reproduced in Firefox. On the Fidelity NetBenefits pre-login page, opening the Virtual Assistant chat shows a text-entry field whose placeholder "Type your question here..." has its descenders clipped: the bottoms of the "y" (in "Type"/"your") and "q" (in "question") are cut off flat. This is a visual rendering bug consistent with the report. The textarea has computed height:20px, font-size:16px, line-height:normal and no vertical padding, leaving no room for descenders. The Chrome cross-check could NOT be confirmed in this environment: the virtual-assistant script bundles (assets.fidelity.com/virtual-assistant/runtime|polyfills|main.*-bundle.js) repeatedly failed to load with net::ERR_HTTP2_PROTOCOL_ERROR, so the chat launcher never rendered and the chat could not be opened in Chrome. That is an environmental network failure rather than the site's actual Chrome behavior, so chrome_reproduced is left null. The report states Chrome (and after typing/deleting text in Firefox the placeholder shifts up and the clipping goes away), indicating this is a Firefox-specific rendering issue.

Comment 3

[AutoWebCompat]

Attachment: Screenshot generated by autowebcompat bot

Comment 4

[Daniel Holbert [:dholbert]]

Regression range: https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=02376ed8674012d2bd575682466cc9177039adb9&tochange=a77a08b9be8a059936afa68f259adb86823bb75f

--> Regression from bug 2031757
https://hg-edge.mozilla.org/integration/autoland/rev/a77a08b9be8a059936afa68f259adb86823bb75f

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced, from testcase-reducer)

Comment 6

[BugBot [:suhaib / :marco]]

:emilio, since you are the author of the regressor, bug 2031757, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 7

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2031757

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Attachment: Reduced test-case

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2057894 - Don't apply vertical-align to ::placeholder. r=dholbert,#layout

In the regressing bug we did the same for line-height for similar
reasons. In this case the site is setting vertical-align on
::placeholder but expecting it not to have an effect.

It doesn't have an effect per spec:

All properties that apply to the ::first-line pseudo-element also
apply to the ::placeholder pseudo-element, except those defined in
[CSS-INLINE-3].

Implement that to the letter (which in practice only impacts
vertical-align).

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3d37da6a78fe
https://hg.mozilla.org/integration/autoland/rev/64d487415d14
Don't apply vertical-align to ::placeholder. r=dholbert,layout-reviewers,firefox-style-system-reviewers,dshin

Comment 11

[Daniel Holbert [:dholbert]]

I'm assuming this is wontfix for firefox153 (already in release), but we might consider fixing this in 153esr.

Comment 12

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

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

Comment 13

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/64d487415d14

Comment 14

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

Upstream PR merged by moz-wptsync-bot

Comment 15

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected, along with ESR.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta and ESR approvals.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox154 and the ESR status flag(s) to wontfix.

For more information, please visit BugBot documentation.

Comment 16

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2057894 - Don't apply vertical-align to ::placeholder.

In the regressing bug we did the same for line-height for similar
reasons. In this case the site is setting vertical-align on
::placeholder but expecting it not to have an effect.

It doesn't have an effect per spec:

All properties that apply to the ::first-line pseudo-element also
apply to the ::placeholder pseudo-element, except those defined in
[CSS-INLINE-3].

Implement that to the letter (which in practice only impacts
vertical-align).

Original Revision: https://phabricator.services.mozilla.com/D314283

Comment 17

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Trivial-ish compat fix.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: yes
• Steps to reproduce for manual QE testing: comment 0
• Risk associated with taking this patch: low
• Explanation of risk level: stops making some properties apply to ::placeholder as per spec.
• String changes made/needed?: none
• Is Android affected?: yes

Comment 18

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2057894 - Don't apply vertical-align to ::placeholder.

In the regressing bug we did the same for line-height for similar
reasons. In this case the site is setting vertical-align on
::placeholder but expecting it not to have an effect.

It doesn't have an effect per spec:

All properties that apply to the ::first-line pseudo-element also
apply to the ::placeholder pseudo-element, except those defined in
[CSS-INLINE-3].

Implement that to the letter (which in practice only impacts
vertical-align).

Original Revision: https://phabricator.services.mozilla.com/D314283

Comment 19

[Phabricator Automation]

firefox-esr153 Uplift Approval Request

• User impact if declined/Reason for urgency: Trivial-ish compat fix.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: yes
• Steps to reproduce for manual QE testing: comment 0
• Risk associated with taking this patch: low
• Explanation of risk level: stops making some properties apply to ::placeholder as per spec.
• String changes made/needed?: none
• Is Android affected?: yes

Comment 20

[Monica Chiorean (OOO July 31st 5:30PM)]

I was able to reproduce the issue on Ubuntu 24.04 using FF build 154.0b3 and steps from description.
Verified as fixed on Ubuntu 24.04/Win11x64 using FF build 155.0a1(20260728095222). Waiting for next beta.

Comment 21

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/2087efbd1de6
https://hg.mozilla.org/releases/mozilla-beta/rev/1ffab4ebcfd3

Comment 22

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr153/rev/c5c455afccdc