grid-template-rows percent value is treated as unresolvable, in a grid with definite min-height and unspecified height
Categories
(Core :: Layout: Grid, defect)
Tracking
()
People
(Reporter: r.rudolph, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(3 files)
firefox.png
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.
|
||
Comment 1•1 year ago
|
||
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.
I just added two screenshots (firefox.ong and falkon.png) (see both pictures above) to demonstrate the difference.
|
||
Comment 5•1 year ago
|
||
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.
|
|
||
Updated•1 year ago
|
|
|
||
Updated•1 year ago
|
|
|
||
Updated•1 year ago
|
|
|
||
Comment 6•1 year ago
|
||
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.
Description
•