1856915 - The button to show/hide password is missing (or clipped) from the right side of the password field on login.yahoo.com

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Attachment: show hide password Chrome vs FF.png

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: Nightly 120.0a1-20231003093318

Preconditions: Account needed

Steps to reproduce:

1. Go to https://login.yahoo.com
2. Enter your Username/email or phone number.
3. Tap "Next".
4. Observe the password field.

Expected Behaviour:
The password field has a button to show/hide the password.

Actual Behaviour:
The button to show/hide the password is missing.

Notes:

1. Screenshot provided
2. Reproducible on Firefox Release as well
3. Not reproducible on Chrome
4. Issue found during WebCompat team [Top100] websites testing

Comment 1

[Calin Tanase]

Verified this issue and it's still reproducible on Firefox versions 122 and 125.

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Browsers: Firefox Nightly 125.0a1-20240219095613 / Firefox Release 122.0.1-20240205133611 / Chrome 121.0.6167.144

Note: Not reproducible on Chrome

Comment 2

[Ksenia Berezina [:ksenia]]

Attachment: Screen Shot 2024-09-13 at 7.04.55 PM.png

On my device it's partially visible. Setting diagnosis team to layout

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Ksenia Berezina [:ksenia] from comment #2)

On my device it's partially visible. Setting diagnosis team to layout

Same on my device (and also in RDM). I filed bug 1918968 before noticing this one was already filed - I've posted some analysis over there.

tl;dr:
(1) Yahoo is running up an interop difference that I just filed as bug 1918967 - (where our behavior makes sense I think; they're kinda depending on what feels like a Chrome/WebKit quirk). Yahoo is making this element extra-wide when they're showing it as a password field with the letter-spacing declaration in this rule:

.challenge .input-group.password-container input[type=password],
.generic-page .input-group.password-container input[type=password] {
  font-weight:800;
  letter-spacing:.17647rem;
}

(^ prettified CSS from https://s.yimg.com/wm/mbr/c9d85308a0cd6518f4c0bfe8c77083894a0359a5/yahoo-main.css )

(2) we could hypothetically sitepatch this with a rule like the following, which makes the password field gracefully shrink here (as a flex item) to avoid stealing more space than it needs:

#password-container > input[type="password"] { min-width: 0 }

We might want to suggest to Yahoo that they add something like that, too -- or do something else to limit the width of this password field -- if we've got contacts to send that suggestion to. Right now it's a bit silly for them to be increasing spacing in this element with letter-spacing while also expecting it to not get wider. (though currently Chrome/WebKit do hold up to that expectation, per bug 1918967.)

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1856915 - add a CSS intervention for login.yahoo.com/account to ensure the password-reveal toggle is the expected width; r=ksenia

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ba458d628dd6
add a CSS intervention for login.yahoo.com/account to ensure the password-reveal toggle is the expected width; r=ksenia,webcompat-reviewers

Comment 7

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/ba458d628dd6