1935129 - mail.yahoo.com - Space between fields is not equal when creating an account

Status: NEW

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

Description

[Calin Tanase]

Attachment: image.png

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: 133/135

Steps to reproduce:

1. Go to https://login.yahoo.com/account/create?.intl=us&.lang=en-US&src=ym&activity=mail-direct&pspid=159600001&.done=https%3A%2F%2Fmail.yahoo.com%2Fd&specId=yidregsimplified&done=https%3A%2F%2Fmail.yahoo.com%2Fd
2. Observe the space between the "Password" and "Date of birth" field.

Expected Behavior:
The space between the "Password" and "Date of birth" field is the same as other fields.

Actual Behavior:
The space between "Password" and "Date of birth" field is bigger than the space between other fields.

Notes:

1. Screenshot attached
2. Reproducible regardless of the ETP status
3. Reproducible on Firefox Release as well
4. On Chrome the space seems to be smaller but on Firefox way bigger
5. Issue found during WebCompat team [Top100] websites testing

Comment 1

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

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 2

[Daniel Holbert [:dholbert]]

The "Date of birth" label here is actually a legend on a fieldset, and Yahoo gives it some margin-top for whatever reason:

#account-attributes-challenge .reg-dob {
  font-size: .70588rem;
  margin-top: 1.76471rem;

As it turns out, other browsers ignore that marign-top, whereas Firefox honors it. That's why we're showing more space than other browsers here; the site is asking for it, and we alone are drawing it.

I filed bug 1936475 on this behavior-difference, but I suspect it's not worth changing our own behavior here, since our behavior makes more sense than other browsers, and so far this isn't causing much harm (and we might be able to get other browsers to align with us).

We could theoretically sitepatch this case if we wanted to, by adding e.g.

legend.reg-dob {
  margin-top: 0 !important;
}

Comment 3

[Daniel Holbert [:dholbert]]

(I'm tagging this as webcompat:platform-bug since we do have a platform bug filed on this now, but really this feels more like a bug in other browsers.)