[Affected versions]:

• Fx 72.0a1 (2019-11-10)
• Fx 71.0b8
• Fx 70.0.1

[Affected platforms]:

• Windows 10 x64
• Windows 7 x64
• Ubuntu 18.04 x64

[Steps to reproduce]:

1. Go to any instagram post (eg. https://www.instagram.com/p/B4tZMp3qrAx/)
2. Reduce the browser's width below 720px

[Expected result]:

• No horizontal scrollbar is displayed on the page, all elements are readjust according to the page width

[Actual result]:

• An unnecessary scrollbar is displayed on page bottom, although every element readjust its position based on the page width

[Regression range]:

• Not a regression, issue reproducible way back to Fx 36.0a1; on older builds I couldn’t opened the page.

[Additional notes]:

• Not reproducible on macOS 10.15
• Not reproducible on Chrome

The scrollbar is (based on examining this in the devtools inspector) associated with the <div class="EtaWk"> which has overflow: auto, and which has a child <ul class="XQXOT"> that has width: calc(100% - 8px) and padding: 16px 12px which (including the padding) is 16px wider than its parent (12px padding on each side, minus its width being 8px smaller than the parent), so it overflows the parent.

I'm curious if the situation is the same on other platforms but the scrollbar just doesn't show up, or if the sizing ends up different.

... though actually, it has box-sizing: content-box which doesn't appear to be working (but does in Chrome).

This is a very simple testcase based on looking at what I saw in the devtools inspector and adding pieces until I got the bug to show up (in Firefox, and not in Chromium), and then adding a bunch more pieces to I think make things more similar in the devtools inspector and show additional Firefox/Chrome differences in the underlying widths.

I think the basic difference, though, is that Chrome doesn't show scrollbars when the container is 0-height and we do. But I'm not entirely sure...

(I'm not super-confident this testcase is focusing on the right thing, though.)

I'd be interested if dholbert has thoughts here.

It doesn't seem to be flexbox specific per se. Here's a similar test using only block layout.

It seems that for block-size:auto we increase the border-box size to make room for the scrollbar.

Chrome does the same thing actually (inflate the size to accommodate the scrollbar). But it seems that they have a quirk when the content-box block-size is zero that suppress that behavior. (which seems rather weird to me)

I don't know exactly what's going on here, but at first glance I suspect it's a Chrome bug/quirk.

In particular: if I view the original Instagram URL in Chrome, and I dynamically add & remove overflow-x:scroll to the element in question (<div class="EtaWk"> for me), then the scrollbar sticks around, even though I've restored the page's original styling.

So it seems like they're initially suppressing the scrollbar for some reason (perhaps by accident), and a dynamic "nudge" can make them start showing it, despite the start & end state having the same DOM and CSS.

The add-and-remove-overflow-x:scroll "nudge" causes a similar result (in Chrome) on Mats' testcase#3 -- it makes the scrollbar show up & remain there, on the first element (the one whose scrollbar is initially hidden).

EdgeHTML 18 agrees with Firefox (in scrollbar-presence) on Instagram, and on testcase 1, and on top+bottom of testcase 3 (though they disagree with us on testcase 2 for some reason; they don't show a scrollbar there).

Given that we basically match Edge here, and Chrome's rendering is "unstable" and settles into a state that matches us when jostled with a dynamic change, I tend to think there isn't a Firefox bug hiding here.

We should probably (1) file a Chrome bug (on their inconsistency in the face of a dynamic tweak/untweak to overflow), and (2) morph this into a WebCompat bug and notify instagram about the issue. They can avoid it by using overflow-x:hidden in this mode if they like, since they're hiding the whole element in question anyway.

Here's a testcase demonstrating the Chrome inconsistency. This has four elements that end up with the exact same content & styling, so they should all look the same, but Chrome draws a scrollbar for the first one and not for the other three.

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1024518 on the Chrome inconsistency demonstrated by testcase 4 here.

Also: Safari-with-overlay-scrollbars-turned-off[1] agrees with us on Instagram and on all four testcases here. So this is indeed just a Chrome quirk.

--> morphing this into a WebCompat bug.

[1] MacOS system settings | General | "show scrollbars" setting, pick "always"

I'm composing an email to instagram now. Description of the issue, which I'll link to from the email:

• DIAGNOSIS/ISSUE:
  When the viewport is less than 720px wide, the element in question (<div class="EtaWk">) has overflow:auto, which isn't especially useful because it has ~zero height (aside from the scrollbar), because it has zero in-flow content. (Its only child is absolutely positioned, and hence doesn't contribute to its parent's content size, so this div ends up being zero height.) It does have some horizontal overflow, though, from that abspos child, so the overflow:auto styling forces it to draw that horizontal scrollbar to make that content visible. (It would probably get a vertical scrollbar as well, except it's not tall enough for one to fit, so we throw up our hands and don't bother drawing one.)

• SUGGESTED FIX:
  It looks like Instagram doesn't actually intend for this element's content to be visible at all (and definitely not scrollable) at this viewport-size, so they should style this EtaWk element with overflow:hidden instead of overflow:auto, inside of some CSS rule in a less-than-720px media query guard perhaps.

I've contacted instagram via our Facebook partner list.

The issue still occurs, the unnecessary horizontal scrollbar is displayed.
https://prnt.sc/10i738a

Tested with:
Browser / Version: Firefox Nightly 88.0a1 (2021-03-09)
Operating System: Windows 10 Pro

The issue has been fixed and it is no longer reproducible. Following the steps to reproduce, the horizontal scrollbar is not displayed:

https://prnt.sc/aKx_siahkagS

Anca, is the issue still reproducible on your side?

Tested with:

Browser / Version: Firefox Nightly 102.0a1 (2022-05-03) (64-bit)
Operating System: Windows 10 PRO x64

Anca, is the issue still reproducible on your side?
I confirm this issue is no longer reproducible on my side either, with Firefox 100.0 on Windows 10.