1737567 - bestbuy.com menu items overlapping at some zoom levels related to ResizeObserver and line-height

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Kestrel]

Attachment: Menu items overlapping at 110% zoom

STR:

1. Visit https://www.bestbuy.com/?intl=nosplash.
2. Zoom to 110%.

The "More" menu item (.utility-nav-more-drawer) should be at the end of the list (.bottom-nav-left-wrapper) but overlaps "Top Deals" at the start. Occurs at all window widths. On Windows, the overlap is observable at 100% zoom (96 DPI), Linux (Ubuntu 21.04) at 110% and larger. Does not happen on Chrome at any zoom level.

On Linux the element style is:
100% zoom: "left: 677px" (no overlap)
110% zoom: "left: 91px" (overlaps)

When it is working correctly, visible list items have the attribute aria-hidden="false" but when it fails they all incorrectly have aria-hidden="true".

The problem can be worked around by setting line-height: 1.2 to the list items, overriding line-height: 1.3 from the body (zooming required for it to take effect).

Setting layout.css.resizeobserver.enabled = false also avoids the issue but makes the menu unresponsive to size changes.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Chrome screenshot

I can see this in chrome at some zoom levels as well locally, so likely a website bug / dependent on font metrics?

Comment 2

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:alaskanemily, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Daniel Holbert [:dholbert]]

Based on emilio's observation in Comment 1, this seems to not be a Firefox-specific issue.

However, if it is indeed reproducible at the default zoom level specifically in Firefox (as comment 0 indicates for Windows), then that would definitely be a concern for us that we'd be wise to address via some outreach. So I'll tentatively redirect this to the WebCompat component, since the fix here would be outreach rather than a code change on our end.

Having said that: I can't reproduce at any zoom level on Ubuntu or Windows (Windows 11 in my case). I tried a variety of pixel-scaling values -- 100%, 125%, 150%, and 175% -- at the default browser zoom level as well as 110% and 120%. Also, I made sure my browser window was at the appropriate width so that "Best Buy TotalTech" was the last non-More menu item, to match the conditions in comment 0 as best as I could. (Note that if your browser window is wide enough, then "More" simply doesn't show up because it doesn't need to, which makes this bug trivially unreproducible; so anyone attempting to repro this will need to take care to size their browser such that More does show up.)

kestrel (and emilio), can you still reproduce? I'm wondering if maybe Best Buy noticed this issue themselves & fixed it over the last month.

Comment 4

[Oana Arbuzov [:oanaarbuzov]]

I can't reproduce the issue either.
We also had a similar issue on webcompat.com but it seems t be fixed. https://github.com/webcompat/web-bugs/issues/91257 "Top Deals" is overlapped by the "More" drop-down list
https://i.imgur.com/2lDoxc9.png

Tested with:
Browser / Version: Firefox Nightly 98.0a1 (2022-01-31)
Operating System: Ubuntu 20.04.2