CSS aspect-ratio doesn't occupy space inside grid with auto columns.
Categories
(Core :: Layout: Grid, defect, P3)
Tracking
()
Webcompat Priority | P3 |
People
(Reporter: justas543, Assigned: boris)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Steps to reproduce:
Go to https://jsfiddle.net/hqezdgLy/
Observe element using css aspect-ratio is positioned as if it does not have any width.
Chrome had similar issue with grid columns auto sizing which is now fixed in latest canary. https://bugs.chromium.org/p/chromium/issues/detail?id=1213878
Actual results:
Grid columns does not have the same size as element with css aspect-ratio.
Expected results:
Grid columns have the same size as element with css aspect-ratio.
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
Comment 2•3 years ago
|
||
Boris, I remember you were working on grid+aspect ratio, can you take a look at this?
Assignee | ||
Comment 3•3 years ago
|
||
Sure. I take this.
Assignee | ||
Comment 4•3 years ago
|
||
I suspect this may be related to Bug 1716667, which is recently updated by Google Chrome.
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 5•3 years ago
|
||
The reduced test case from https://jsfiddle.net/hqezdgLy/
Assignee | ||
Comment 6•3 years ago
|
||
OK. It seems we always use nscoord_MAX as the percentage basis when computing inline intrinsic size:
https://searchfox.org/mozilla-central/rev/b79212b4fc017f27ac2435a658d4e9b9798efa86/layout/generic/nsGridContainerFrame.cpp#2873
So we cannot compute a valid block size in nsLayoutUtils::IntrinsicForAxis(), and we cannot compute its inline size by aspect-ratio and the block size.
Assignee | ||
Comment 7•3 years ago
|
||
I just replace the div with img (i.e. replaced elements) and it seems only Firefox has the issue:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9475
Looks like we use its intrinsic inline size for resolving the grid track sizes, instead of applying the natural ratio. This should be an existing issue.
Assignee | ||
Comment 8•3 years ago
|
||
This may depend on bug 1300366 (step 3 in https://drafts.csswg.org/css-grid/#algo-overview):
Then, if the min-content contribution of any grid item has changed based on the row sizes and alignment calculated in step 2, re-resolve the sizes of the grid columns with the new min-content and max-content contributions (once only).
Updated•3 years ago
|
Comment 9•2 months ago
|
||
I believe I am running into the exact same problem. I have a minimal repro case here, please let me know if this is not the same issue so I can file a new ticket.
Description
•