Open Bug 1862752 Opened 6 months ago Updated 6 months ago

grid-template-rows percent value is treated as unresolvable, in a grid with definite min-height and unspecified height

Categories

(Core :: Layout: Grid, defect)

defect

Tracking

()

People

(Reporter: r.rudolph, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

Attached file grid.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0

Steps to reproduce:

grid-template-rows are shown correctly if I use values in px. But if I use percentages instead, then the HTML-document is not shown correctly in Firefox. This is the HTML-code of the webpage:

<!DOCTYPE html>
<html>
<head>
<title>square corners</title>

<style type="text/css">
html,body {
margin:0;
padding:0;
background:white
}
.container {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr 86% 1fr;
grid-template-rows: 1fr 86% 1fr;
}
</style>

<body>

<div class="container">
<div style="background:black"></div>
<div></div>
<div style="background:black"></div>
<div></div>
<div></div>
<div></div>
<div style="background:black"></div>
<div></div>
<div style="background:black"></div>
</div>

</body>
</html>

Actual results:

The squares are not shown correctly.

Expected results:

All four squares should have the same size.
In the browser Falkon the four squares are shown correctly.

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.

Component: Untriaged → Layout: Grid
Product: Firefox → Core
Attached image firefox.png
Attached image falkon.png

I just added two screenshots (firefox.ong and falkon.png) (see both pictures above) to demonstrate the difference.

Thanks for the bug report.

What's happening here is: we're treating the percent height as being unresolvable since the percent basis (the height of the grid) is indefinite -- the grid doesn't have a specified height. (It has a specified min-height, but no specified height.)

If you add a specified height, e.g. height:100vh (matching your min-height declaration), then we resolve the percent in the way that you expect.

I'm not entirely sure that our behavior is incorrect (generally percentage heights are treated as being content-sized if they're resolved against an unspecified height, with some exceptions, and this might be one of the exceptions, but it'll take some study of the grid spec to remember whether it is or not). But regardless of the spec situation, there's definitely an interop issue here, since Chromium is dutifully resolving the percent and we're not.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Blocks: css-grid-1
No longer blocks: css-grid-3
Summary: grid-template-rows in percentages are not shown correctly → grid-template-rows in percentages are not shown correctly, in a grid with definite min-height and unspecified height
Version: Firefox 119 → Trunk
Summary: grid-template-rows in percentages are not shown correctly, in a grid with definite min-height and unspecified height → grid-template-rows percent value is treated as unresolvable, in a grid with definite min-height and unspecified height

From a quick look at the spec, I think this is indeed a Gecko bug, and Chrome is correct here.

The relevant spec section is here:
https://drafts.csswg.org/css-grid-1/#track-sizes

"the <percentage> must be treated as auto, for the purpose of calculating the intrinsic sizes of the grid container and then resolve against that resulting grid container size for the purpose of laying out the grid and its items."

In this case, the "resulting grid container size" is 100vh, and the percentage is expected to resolve against that when doing the actual layout within the grid.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: