1928816 - Margins don't collapse across empty flex or grid containers in Firefox (but they do in Safari)

Status: NEW

(Core :: Layout: Block and Inline, defect)

Description

[Francesco Lodolo [:flod]]

Attachment: Test case

The layout in Safari is completely different from Chrome and Firefox (the title is aligned with the timestamp). Might be worth checking if Firefox implementation is the expected one?

Firefox and Chrome are also slightly different, which the difference becoming more visible as the page grows.

Comment 1

[Francesco Lodolo [:flod]]

Attachment: Browser comparison

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Francesco Lodolo [:flod] from comment #0)

The layout in Safari is completely different from Chrome and Firefox (the title is aligned with the timestamp). Might be worth checking if Firefox implementation is the expected one?

It looks like Safari is letting the margins collapse across the 0-height <div class="title-area"> flex container. Chrome and Firefox do not.

Firefox and Chrome are also slightly different, which the difference becoming more visible as the page grows.

I see that in your screenshot, but I don't see that locally, FWIW (on Win11) - the layouts are identical in Firefox/Chrome (alt-tabbing between the two, there's barely any noticeable difference)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Here's a testcase to explore whether-or-not adjacent margins will collapse between siblings, when they're separated by a 0-height "interloper" in between them.

In this testcase, shorter boxes are cases where the margins did collapse, and taller boxes are cases where the margins did not collapse.

Firefox and Chrome don't collapse for the 3rd, 4th, 5th, or 6th boxes -- i.e. we don't collapse unless the interloper is display:block.

WebKit doesn't collapse for the 3rd and 4th boxes here (where the interloper is a multicol or table), but they do collapse the 5th and 6th boxes (where the interloper is a flex or grid container).

Comment 4

[Daniel Holbert [:dholbert]]

The relevant spec text is here:
https://www.w3.org/TR/CSS22/box.html#collapsing-margins

It does say this:

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed. 

That's the relevant text that justify's Safari's behavior in testcase 2 here; they're letting margins "collapse through" the empty child (whether it's a block or a flex container or a grid container). It's interesting that they don't do that for the table and multicol cases, but I imagine that's because of the anonymous boxes that get automatically generated inside of those elements, or something along those lines.

Anyway: Safari's behavior seems reasonable, and I think it's reasonable to consider switching to match them, but it's probably not a high priority.

Comment 5

[Daniel Holbert [:dholbert]]

--> Reclassifying to block/inline layout since that's where margin collapsing happens.