1443274 - Different rendering of flex-based layout in Firefox and Chrome.

Status: RESOLVED DUPLICATE of bug 1136312

(Core :: Layout, defect)

Description

[Thomas Wisniewski]

Attachment: testcase.html

The attached testcase seems to reveal two flexbox interop differences between Firefox nightly and Chrome 64.

The height of the white box isn't 100px in Chrome, and Chrome also seems to handle the overflow:hidden differently, restricting the width of the white box so it does not scroll off the side of the page.

(The latter issue lead to a webcompat.com report where an image slideshow has a ridiculously large size in Firefox compared to Chrome, due to the JS width of an element not being affected by the overflow:hidden difference).

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to Thomas Wisniewski from comment #0)
> The height of the white box isn't 100px in Chrome

Huh! It looks like it is, for me. The white box is 100px tall in Chrome and Firefox on my system.

I won't worry about that too much, though, since that's not the main point here.

> and Chrome also seems to
> handle the overflow:hidden differently, restricting the width of the white
> box so it does not scroll off the side of the page.

Yeah, this part is from a spec change which we need to address -- specifically, this is bug 1331692, which I guess I duped to bug 1136312.  So I'll dupe this one there as well.

(Chrome is getting saved by "width:100%", which places an explicit clamp on the resolved "implied minimum size" of the flex item.  If you remove that "width:100%" in Chrome, then the box gets huge & overflows, just like it does in Firefox.  On the flip side: if you add "flex-basis:auto" (or change "flex:1" to "flex: 1 auto"), then that makes Firefox match the nicer Chrome rendering, because we activate the same clamping mechanism that saves them.)

From a webcompat/outreach perspective, we might suggest that the web developers add "min-width:0" to their #slideshow rule.  That's the least-invasive hackaround here.  But really this is a Firefox bug (matching outdated spec text), and we should fix bug 1331692 / bug 1136312.