Open Bug 1844182 Opened 1 year ago Updated 1 year ago

subgrid ends up with grid row being too tall (sized to fit large images whose widths, and hence heights, are constrained with `max-width:100%` or `width:100%`)

Categories

(Core :: Layout: Grid, defect)

Product:
Core
Component:
Layout: Grid
Type:
defect

Tracking

()

People

(Reporter: argyle, Unassigned)

References

Details

Attachments

(2 files, 1 obsolete file)

Screenshot 2023-07-18 at 1.59.37 PM.png
(deleted), image/png
Details
testcase 1 (reduced): no red should be visible
(deleted), text/html
Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Steps to reproduce:

I made a pretty typical subgrid demo https://codepen.io/argyleink/pen/poQaXNx

I tested in Firefox stable + Nightly and the issue existed in both.

Actual results:

content is not laid out in the center and the first row of the subgrid is grown very tall

Expected results:

should be centered and the 1st row is intrinsicly sized like the others. firefox should match safari and chrome.

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout
Product: Firefox → Core

Thanks for the bug report! I can reproduce.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Component: Layout → Layout: Grid
Ever confirmed: true
Version: Firefox 115 → Trunk

It looks like the extra height here is probably coming from the intrinsic height of the img element; we're not accounting for the fact that it's got a smaller actual height due to having a constrained width (via max-width:100%).

Attachment #9345902 - Attachment is obsolete: true
Attachment #9345902 - Attachment description: testcase 1 (reduced): no red should be visible → (replaced by later testcase to correct typo)
Summary: CSS subgrid interop issue → subgrid ends up with grid row being too tall (sized to fit large images whose widths, and hence heights, are constrained with `max-width:100%`)
Duplicate of this bug: 1847283

The same bug happens if I use width:100% in the testcase instead of max-width, too. (That's roughly the setup in duplicate bug 1847283.)

Summary: subgrid ends up with grid row being too tall (sized to fit large images whose widths, and hence heights, are constrained with `max-width:100%`) → subgrid ends up with grid row being too tall (sized to fit large images whose widths, and hence heights, are constrained with `max-width:100%` or `width:100%`)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: