www.neighborhoodscout.com - Items below the map are overlapped when the viewport is set to less than 991px

[webcompat-bot]

URL: https://www.neighborhoodscout.com/ma/weston

Browser / Version: Firefox 89.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
At viewport widths less than or equal to 991px, the page items below the mapbox map are overlapped and misaligned on Firefox only. At the same viewport widths less than or equal to 991px on Chrome, the page items are not overlapped, and are aligned correctly.

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue. The items below the map are overlapped when the view port is set below 991px:

Tested with:

Browser / Version: Firefox Release 89.0 (64-bit)/ Firefox Nightly 91.0a1 (2021-06-17) (64-bit)/ Chrome Version Version 91.0.4472.101
Operating System: Mac OSX 10.15.6

Notes:

1. Reproducible regardless of the status of ETP
2. Reproducible on the latest build of Firefox Nightly
3. Works as expected using Chrome:

Moving this to NeedsDiagnosis for further investigations.

[wisniewskit]

Here is an interesting case of them using negative margins on flex-items to hack their layout so that it works in Chrome:

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

If I drop the negative margins, Chrome renders as Firefox does. It seems to be honoring the margin values, while Firefox does not. This seems to be confirmed if I add width:calc(100% - 60px) in Firefox, which fixes the layout. @dholbert, is it a known interop issue that Firefox and Chrome treat margins differently for flexboxes in this way?

[dholbert]

If I drop the negative margins, Chrome renders as Firefox does. It seems to be honoring the margin values, while Firefox does not.

Chrome is reacting to the margin values (and significantly changing its layout when they're present), and Firefox is not.

There's some floated content just before the flex container here, with class .maplite-links, and it seems to be involved -- if I remove that element, the overlapping content issue seems to go away (in Firefox as well as Chrome-with-margins-set-to-zero-to-make-it-render-like-Firefox).

I suspect this is https://bugs.chromium.org/p/chromium/issues/detail?id=1141209

[wisniewskit]

Thanks. Then our way forward here will be a site patch and outreach attempt, while we wait for the Chrome bug report to be addressed.

[webcompat-bot]

Generate outreach template

[dholbert]

I'm revisiting this after landing a fix for https://bugzilla.mozilla.org/show_bug.cgi?id=1745310 (which would've fixed this):

I tested Nightly 2022-05-01 (before that landed fix) and can't reproduce this bug anymore, so it seems the site probably changed to work around this (or perhaps had a redesign).

[softvision-raul-bucata]

The issue has been fixed and it is no longer reproducible:

Tested with:

Browser / Version: Firefox Nightly 107.0a1 (2022-09-21) (64-bit)
Operating System: Mac OSX 10.15.6

Closing this as FIXED

[inv_38/2022]