NEW261556
Element with `height: 100%` has incorrect height inside container that uses aspect-ratio and max-width 
https://bugs.webkit.org/show_bug.cgi?id=261556
Summary Element with `height: 100%` has incorrect height inside container that uses a...
Oliver Joseph Ash
Reported 2023-09-14 08:09:27 PDT
Created attachment 467680 [details] Screenshot https://jsbin.com/bitizawiji/1/edit?html,output ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>JS Bin</title> </head> <body> <div style="width: 300px"> <div style="aspect-ratio: 4000 / 6000; max-width: 100%; background: green" > <div style="border: 5px solid black; height: 100%"></div> </div> </div> </body> </html> ```
Attachments
Screenshot (43.96 KB, image/png)
2023-09-14 08:09 PDT, Oliver Joseph Ash 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-09-14 18:57:38 PDT
<rdar://problem/115531554>
Ahmad Saleem
Comment 2 2023-09-19 17:10:40 PDT
Reproducible in Safari Technology Preview 178 as well.
wesley luyten
Comment 3 2023-10-29 16:31:06 PDT
We're facing the same bug. Thanks for reporting! https://codesandbox.io/s/safari-aspect-ratio-height-bug-l363g6?file=/index.html
wesley luyten
Comment 4 2024-10-01 13:17:52 PDT
Could this be looked at in the future? It's causing our video player themes to have a 3ish px border at the bottom :( https://player-style-hy974ff6a-mux.vercel.app/ PR https://github.com/muxinc/player.style/issues/107
Ahmad Saleem
Comment 5 2026-04-01 03:15:08 PDT
In RenderBox.cpp -> constrainLogicalMinMaxSizesByAspectRatio: Removing this fixes it: if (minimumSizeType == MinimumSizeIsAutomaticContentBased::Yes) computedMinSize = std::min(computedMinSize, computedMaxSize); But I think this is still open - https://github.com/w3c/csswg-drafts/issues/6071 (might be something to check with Elika).
Sammy Gill
Comment 6 2026-04-29 12:06:48 PDT
Hi, I believe at some point in time the CSSWG resolved on an issue that would have explained Safari's behavior when this was occurring: https://github.com/w3c/csswg-drafts/issues/7461 I think there were also some WPTs that assert this behavior: https://wpt.fyi/results/css/css-sizing/aspect-ratio/block-aspect-ratio-039.html?label=experimental&label=master&aligned Safari was passing these tests but other browsers were failing until around July 2024. Since then it seem like all browsers agree on the rendering of the testcase. Could you let me know if you are still experiencing some issues on your site that occur on Safari only?
Note You need to log in before you can comment on or make changes to this bug.