1944725 - www.homedepot.com - A white bar overlaps the site

Status: NEW

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

Description

[railioaie]

Environment:
Operating system: Android 14
Firefox version: Firefox Mobile 134.0

Preconditions:
Clean profile

Steps to reproduce:

1. Navigate to: https://www.homedepot.com/s/Square%20recessed%20light?NCNI-5
2. Observe

Expected Behavior:
The page is loading correctly

Actual Behavior:
A white bar overlaps the site

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/146030

Comment 1

[railioaie]

Attachment: Screenshot_112.png

Comment 2

[railioaie]

Attachment: Screenshot_111.png

Comment 3

[Randell Jesup [:jesup] (needinfo me)]

I also see this on an S24 Android in nightly

Comment 4

[Randell Jesup [:jesup] (needinfo me)]

Chromemask doesn't help

Comment 5

[Daniel Holbert [:dholbert]]

I can reproduce in Responsive Design Mode on desktop. I'm using the "Galaxy Note 20 Android 11" profile.

The element here is a fixed-position <aside> with width:100%, and with left: -412px (where 412px is precisely my viewport width). For some reason, the width:100% is resolving to 442.9px instead of the actual viewport-width of 412px.

I'm guessing this is due to some mobile special cases about the sizing of the fixed-position viewport.

Comment 6

[Daniel Holbert [:dholbert]]

(This same element is present in Chrome but it's the expected size there -- 412px wide, where 412px is the size of the viewport. So the left:412px styling successfully takes it fully off-screen.)

Comment 7

[Daniel Holbert [:dholbert]]

Aha, so there's some text running off the right side of the page in Firefox, which grows the size of the scrollable area (i.e. I can drag my screen sideways a bit) and hence grows the fixedpos viewport. And that's why the fixedpos offscreen thing with width:100% ends up larger than expected.

So, the proximal problem here is the text running off the right side of the page.

I see two specific items whose text runs off the right side:
(1) Brand Maxxima, product "6 in. 5 CCT Retrofit Square LED Downlight, 1200 Lumens, Color Selectable 2700K/3000K/3500K/4000K/5000K, Dimmable" (Model# MRL-61405S)
(2) Brand LUXRITE, product "6 in. 5 CCT Retrofit Square LED Downlight, 1200 Lumens, Color Selectable 2700K/3000K/3500K/4000K/5000K, Dimmable" (Model# LR23785-12PK)

I suspect the issue is that we probably interpret 2700K/3000K/3500K/4000K/5000K as an unbreakable word token, or something along those lines.

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #6)

(This same element is present in Chrome but it's the expected size there -- 412px wide, where 412px is the size of the viewport. So the left:412px styling successfully takes it fully off-screen.)

Actually I see a version of this same bug in Chrome on desktop - this all just depends on whether a product with a sufficiently-long product name is in view in the listing. If it is, this breaks regardless of browser. (Perhaps slightly more or less depending on exact font chosen etc.)

I'll attach screenshots & more notes later on today; have to step away right now. But I think we can probably consider this INVALID and just a site bug that's not Firefox-specific.

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: screencast showing the same bug eventually materialize in Chrome too (in RDM on desktop)

Comment 10

[Daniel Holbert [:dholbert]]

On Android, this is worse in Firefox than in Chrome because we apply font-inflation to the text that happens to run off the right side of the screen, and we get more overflow than Chrome does as a result.

I confirmed that:
(1) this issue mostly goes away if I turn off font inflation in Firefox's settings (Settings | Accessibility | Automatic Font Sizing).
(2) I can artificially generate this exact same bug on Chrome if I simply insert a bunch of "aaaaa..." text into the start of some product description, to make that description's text a bit wider (as it is in the font-inflated Firefox). e.g. in the Maxxima-brand product that I listed above, I use devtools to change the name to "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 6 in. 5 CCT Retrofit Square LED Downlight, 1200 Lumens, Color Selectable 2700K/3000K/3500K/4000K/5000K, Dimmable", and this produces precisely the same issue in Chrome that we're hitting in Firefox here. (It produces a more-severe version since that "aaaaa...aaa" is quite wide.)

So the Firefox/Chrome difference here is precisely due to Firefox's font-inflation heuristics making the text wider than it otherwise would be (which then causes overflow and increases the size of the fixed-pos viewport, which then brings the offscreen <aside> partially onscreen per comment 5).

--> Marking this as depending on bug 1891086. I think we can consider this needs-sitepatch with

:root { -moz-text-size-adjust: none; }

...being a possible intervention here.

Comment 11

[Thomas Wisniewski [:twisniewski]]

I just tested this in the Android emulator with the embedded browser, and the CSS suggested in comment #10 doesn't make the white bar go away in the reported URL, so there is more to a fix here than just disabling font inflation. Indeed, on my phone Chrome also has the text for one of the "Maxxima" search results extending outside of its box, but it isn't affecting the white bar's size. I'll defer on writing a site patch for now.