Bug 265243 - `aspect-ratio` CSS may not work correctly
Summary: `aspect-ratio` CSS may not work correctly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 17
Hardware: Mac (Apple Silicon) Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-11-22 04:26 PST by misinoe.t
Modified: 2024-04-11 18:45 PDT (History)
6 users (show)

See Also:

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 Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description misinoe.t 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.
Comment 1 Radar WebKit Bug Importer 2023-11-29 04:27:18 PST 
<rdar://problem/118926827>