1908674 - canada.ca - "Email address:" field expands off screen

Status: RESOLVED INVALID

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

Comment 1

[Calin Tanase]

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

Steps to reproduce:

1. Go to https://ised-isde.canada.ca/site/canada-small-business-financing-program/en/subscription-newsletters-lenders
2. Scroll down the page.
3. Observe the email address field.

Expected Behavior:
The email address field is displayed correctly.

Actual Behavior:
The email address field expands off screen.

Notes:

1. Screenshot attached
2. Reproducible regardless of the ETP status
3. Reproducible on Firefox Release as well
4. Not reproducible on Chrome
5. Issue found during WebCompat team [Top100] websites testing

Comment 2

[Calin Tanase]

Attachment: image.png

Comment 3

[Daniel Holbert [:dholbert]]

This is just a font difference, I think, which means a small difference in the sizing of this element. This bug is reproducible regardless of browser on sufficiently-small phones; it's just reproducible in Firefox on slightly larger phones than it is in Chrome, as discussed below.

This element doesn't have any special guardrails to keep it from running off the edge of the screen. It's sized to be ~40 characters wide, however wide that ends up being:

<input id="address" name="address" size="40" type="text">

That ends up being slightly wider in Firefox than in Chrome due to font differences, presumably, and on the device that the reporter was using, that delta happens to be the difference between barely fitting vs. overshooting.

I can reproduce this same issue in Chrome's-on-Desktop's DevTools by emulating a "Samsung Galaxy S8+", which is an indication that it's not a Firefox-specific bug -- it just requires a skinny enough viewport (relative to the specified width of this input field), and it's slightly easier to trigger in Firefox since this input field is slightly wider in Firefox.

--> closing as INVALID

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug reproducing in Chrome on "Galaxy Z Fold 5"

Here's a screenshot in Chrome to demonstrate that this isn't Firefox-specific; it just depends on how wide <input size="40"> works out to be (which is font-dependent and hence varies subtly between browsers), and whether or not that happens to be wider than your phone's screen.