| Summary: | `aspect-ratio` CSS may not work correctly | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | misinoe.t | ||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | 709922234, bfulgham, sgill26, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 17 | ||||||
| Hardware: | Mac (Apple Silicon) | ||||||
| OS: | Unspecified | ||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=272527 | ||||||
| Attachments: |
|
||||||
Created attachment 468724 [details] html that confirms the aspect-ratio problem, and videos of other browsers Environment * M1 MacBook Pro 2020 - macOS 14.1.1 (23B81) - Safari 17.1 (19616.2.9.11.7) * iOS Simulator (iPhone 15 Pro Max) - iOS 17.0 In Safari, when `overflow` and `aspect-ratio` are set to a child element of `display: flex` and the screen is resized, the `aspect-ratio` of the child element is not maintained. You can see the problem by opening the attached file `aspect-ratio-test.html` and resizing the screen using responsive mode. I expect that if I specify `aspect-ratio: 1 / 1`, the element will be displayed square. Thank you in advance.