Bug 240278

Summary: REGRESSION (Safari 15.4): Issue with a Grid container with aspect-ratio without a fixed width
Product: WebKit Reporter: kevin
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: gsnedders, kevin, simon.fraser, webkit-bug-importer, webkit-layout-noreply, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: Unspecified   
Attachments:
Description Flags
screenshot of the bug and examples of how it should behave none

Description kevin 2022-05-10 07:42:05 PDT 
Created attachment 459118 [details]
screenshot of the bug and examples of how it should behave

This behaviour is only in Safari 15.4. Everything works as expected in 15.3 and earlier.

A grid container with an `aspect-ratio` and a width of `auto` or a percentage will not allow its children to use the available space.
If the width is a fixed value (with `px`, `rem`, etc.) or if it is set in viewport units, it behaves as expected.

In the attached screenshot, all three should look the same. 
The element with the text has an `align-self: end` which should move it to the bottom of the parent. It does for the examples using `px` and `vw` widths, but not the one using `%`.

You can also see a live example of this here: https://cdpn.io/pen/debug/MWQyMOV
Comment 1 Radar WebKit Bug Importer 2022-05-10 09:15:15 PDT 
<rdar://problem/93033369>
Comment 2 Sam Sneddon [:gsnedders] 2022-05-10 09:55:38 PDT 
Appears to work in STP, and I'm pretty sure it's a dupe of this.

*** This bug has been marked as a duplicate of bug 237276 ***
Comment 3 Sam Sneddon [:gsnedders] 2022-05-10 10:07:45 PDT 
Also, to note: this appears to work in Safari 15.5 beta.