Grid item with aspect ratio respects parent size when it shouldn't
Categories
(Core :: Layout: Grid, defect)
Tracking
()
People
(Reporter: veyndan, Unassigned)
References
Details
Attachments
(2 files)
Firefox
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0
Steps to reproduce:
I ran the following snippet in Firefox:
<!DOCTYPE html>
<html>
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
box-sizing: border-box;
display: grid;
}
div {
aspect-ratio: 10;
background: hotpink;
}
</style>
<body>
<div></div>
</body>
</html>
Actual results:
A think pink horizontal strip that takes up a tenth of the screen is displayed at the top of the page.
Expected results:
The pink strip should take up the whole height, and extend out of the parent grid, making the viewport horizontally scrollable.
I tried the above code on the following browsers, and they all don't respect the grid parent bounds:
- Chromium 142.0.7444.175 on Linux
- Google Chrome 142.0.7444.176 on macOS
- Safari 26.1 (21622.2.11.11.9) on macOS
What Firefox currently does could easily be the correct solution, but since I have no idea what's spec compliant, I'm just filing the bug with you as it is currently the odd one out.
|
||
Comment 1•17 hours ago
|
||
Thanks for the bug report! I'm pretty sure this is a duplicate of a bug that's already filed; I've seen something like this recently...
For now, here's a live version of the testcase, for convenient viewing.
|
|
||
Comment 2•17 hours ago
|
||
Oh, the bug I was remembering was another one you filed :) (also about grid with aspect-ratio on an item, with the item ending up smaller in Firefox).
I'll just mark that one as "see also" for now.
Yep! I wasn't sure whether these were two separate bugs, or just different flavours of the same bug, since in the other bug ticket, the grid item disappears, while in this one, it's a different size. I thought I might as well file it, because in the worst case, it's just another way to look at the same bug. In the best case, it's a new bug!
Description
•