1730965 - Interop issues with grid sizing on leadstories.com

Status: VERIFIED DUPLICATE of bug 1799111

(Core :: Layout: Grid, defect)

Description

[Thomas Wisniewski [:twisniewski]]

I just spotted two apparent interop issues on leadstories.com while diagnosing https://webcompat.com/issues/83097.

1. For a grid container (<div class="layout-container grid">), Firefox honors box-sizing:padding-box, while Chrome seems to just ignore it and use content-box.

2. Chrome does not seem to grow the width of the same grid element to fit its contents, despite there being a long, unbroken text node in it (with the text SHA512:). Firefox grows the box, breaking the page layout with overlapping text, while Chrome seems to restrict the width of that text node as though it has overflow:visible.

Mats, can you help confirm if these are Chrome or Firefox issues?

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(In reply to Thomas Wisniewski [:twisniewski] from comment #0)

2. Chrome does not seem to grow the width of the same grid element to fit its contents, despite there being a long, unbroken text node in it

Here's a testcase for this issue (which seems to be the most-catastrophic issue with this particular site, I think).

The site in question defines a grid with 12 columns, and has a grid item defined to span all 12. I've simplified that here to 2 columns with the grid item spanning both columns. I've actually included grids with 4, 3, 2, and 1 columns (but with the item spanning 2 columns in each case).

In all cases, Firefox seems to mandate that we have enough space for the item's min-content size (i.e. the blue areas are all wide and overflow the black-bordered grid), whereas Chrome does not. (For Chrome, the blue 2-column item occupies half of the 4-column grid, 2/3 of the 3-column grid, and all of the 2-column and 1-column grids.)

Comment 2

[Daniel Holbert [:dholbert]]

I think that part (testcase 1) is the same thing described in bug 1708884, which means this is probably a duplicate of bug 1530097.

Comment 3

[Daniel Holbert [:dholbert]]

RE the other issue that Thomas brought up: that seems to have been a Chrome bug that was fixed (or that I can't reproduce).

(In reply to Thomas Wisniewski [:twisniewski] from comment #0)

1. For a grid container (<div class="layout-container grid">), Firefox honors box-sizing:padding-box
   while Chrome seems to just ignore it and use content-box.

(you mean border-box, not padding-box -- the latter is no longer a supported value for box-sizing, and fortunately isn't what this page uses)

As noted in the github issue, you're specifically talking about box-sizing as it applies to max-width here -- the page has max-width: 1380px on this element, and IIUC, you were observing that setting the box's content-box to 1380px in Chrome, even though the page has box-sizing: border-box.

That doesn't seem to be an issue anymore, on my machine, using Chrome 97 dev. I'm seeing that element ending up with a content-box width of 1284 (with 48px of padding on each side, for a total of 1380px), which is what we expect. So this part was probably a Chrome bug that was fixed.

So, I'll just mark this as a dupe of bug 1530097, for the other part (item 2 in comment 0, exercised in the attached testcase, as discussed in comment 1-2)

Comment 4

[Daniel Holbert [:dholbert]]

I moved the "See also" linkage over to the dupe-target; I'm clearing it from this bug as a result.

Comment 5

[Daniel Holbert [:dholbert]]

This is now fixed in Nightly, almost certainly via bug 1799111, so let's dupe this over there instead.