RESOLVED FIXED265243
`aspect-ratio` CSS may not work correctly on a child of a flexbox
https://bugs.webkit.org/show_bug.cgi?id=265243
Summary `aspect-ratio` CSS may not work correctly on a child of a flexbox
misinoe.t
Reported 2023-11-22 04:26:05 PST
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.
Attachments
html that confirms the aspect-ratio problem, and videos of other browsers (32.69 MB, application/zip)
2023-11-22 04:26 PST, misinoe.t
no flags
Patch (8.77 KB, patch)
2026-05-12 10:35 PDT, alan
no flags
Patch (8.79 KB, patch)
2026-05-12 10:35 PDT, alan
ews-feeder: commit-queue-
[fast-cq]Patch (8.81 KB, patch)
2026-05-12 10:55 PDT, alan
no flags
Radar WebKit Bug Importer
Comment 1 2023-11-29 04:27:18 PST
alan
Comment 2 2026-05-12 10:35:01 PDT
alan
Comment 3 2026-05-12 10:35:51 PDT
alan
Comment 4 2026-05-12 10:55:04 PDT
Created attachment 479640 [details] [fast-cq]Patch
EWS
Comment 5 2026-05-13 10:04:55 PDT
Committed 313170@main (07cd6d72a12e): <https://commits.webkit.org/313170@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 479640 [details].
Sammy Gill
Comment 6 2026-05-21 09:43:16 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/60063
Note You need to log in before you can comment on or make changes to this bug.