Bug 265243

Summary:

`aspect-ratio` CSS may not work correctly on a child of a flexbox

Product:

WebKit

Reporter:

misinoe.t

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

709922234, bfulgham, koivisto, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=272527
https://github.com/web-platform-tests/wpt/pull/60063

Attachments:

Description	Flags
html that confirms the aspect-ratio problem, and videos of other browsers	none
Patch	none
Patch	ews-feeder: commit-queue-
[fast-cq]Patch	none

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	Details
Patch (8.77 KB, patch) 2026-05-12 10:35 PDT, alan	no flags	Details Formatted Diff Diff
Patch (8.79 KB, patch) 2026-05-12 10:35 PDT, alan	ews-feeder: commit-queue-	Details Formatted Diff Diff
[fast-cq]Patch (8.81 KB, patch) 2026-05-12 10:55 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.