1990927 - Images shrink correctly inside a subgrid, but the track space they occupy does not, causing the container to remain larger than its content.

Status: NEW

(Core :: Layout: Grid, defect, P3)

Description

[Dannie Vinther]

Attachment: firefox-subgrid-issue.png

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

Steps to reproduce:

1. Create a grid layout where a child grid inherits rows via subgrid.
2. Place images as direct children of that subgrid container.
3. Resize the images or let them shrink naturally.
4. Observe the result in Firefox vs. Chrome and Safari.
   Live demo:
   https://codepen.io/dannievinther/pen/dPGYaRp/c3b5c7b3206c3dd9ed19056f331a4e06

Actual results:

The images shrink visually inside the subgrid as expected, but the track space they occupy does not shrink.
• The container’s row remains larger than the actual content.
• This results in large empty gaps (sometimes below, sometimes above the images).
• The position of the gap can change when resizing or when content changes slightly.

This behavior occurs consistently in Firefox and Firefox Nightly.

Expected results:

The grid row height should shrink to match the resized image, ensuring the container height matches its content.
• No empty gaps should remain.
• The result should match the rendering in Chrome and Safari, where the container adapts to the content size correctly.
Additional details
• Product: Firefox Nightly (also reproducible in stable Firefox)
• Affects subgrid layouts when direct children include images that shrink.
• The problem does not occur if the child grid does not use grid-template-rows: subgrid or if the image is wrapped in a <div>.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Testcase #1 from comment 0

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Ting-Yu, looks like fallout from bug 1957244, can you take a look?

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1957244

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1957244

Comment 6

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: firefox-subgrid-issue.png (layout.css.grid-multi-pass-track-sizing.enabled=false)

Here is a screenshot with layout.css.grid-multi-pass-track-sizing.enabled=false. It appears we still compute grid row with the image's natural height. At least this is not a regression from bug 1957244, but is definitely a valid bug.

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Testcase #2: Reduced from Testcase #1

In this further reduced testcase #2, Firefox renders the outer grid container (green background) with 300px height, regardless of whether layout.css.grid-multi-pass-track-sizing.enabled is true or false. Google Chrome renders the outer grid container with 100px height.