Bug 264043

Summary:

position: absolute parent breaks flex child aspect-ratio

Product:

WebKit

Reporter:

marcel laverdet <marcel.webkit>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

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

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 14

URL:

https://jsfiddle.net/390wb164/show

See Also:

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

Attachments:

Description	Flags
Patch	none
Patch	none
[fast-cq]Patch	none

marcel laverdet

Reported 2023-11-01 09:52:16 PDT

I don't know the cause of this issue but I think the example code shows the problem clearly. Two identical flex containers contain some images. The images have `aspect-ratio:1` set. The first "collection" div is sized with "height:100%", and the images are appropriately sized. The second "collection" div is sized with "position:absolute;inset:0" and the images are not sized correctly. In a more complicated example the images were sized correctly but the width of the container was the size that it *would have been* if aspect-ratio was not applied. It is just total anarchy between aspect-ratio and flex. ``` <!doctype html> <html> <head> <style> img { aspect-ratio: 1; height: unset; width: unset; } .holder { height: 200px; position: relative; } .collection { display: flex; overflow: auto; } </style> </head> <body> <div class="holder"> <div class="collection" style="height: 100%"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> </div> </div> <div class="holder"> <div class="collection" style="position: absolute; inset: 0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> <img height="536" width="354" src="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"> </div> </div> </body> </html> ```

Attachments
Patch (11.21 KB, patch) 2026-05-13 07:59 PDT, alan	no flags	Details Formatted Diff Diff
Patch (11.21 KB, patch) 2026-05-13 10:58 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (18.48 KB, patch) 2026-05-13 14:54 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2023-11-01 11:39:55 PDT

Did this work in older Safari versions?

Radar WebKit Bug Importer

Comment 2 2023-11-01 11:40:06 PDT

<rdar://problem/117807518>

marcel laverdet

Comment 3 2023-11-01 14:14:23 PDT

> Did this work in older Safari versions? Nope, I tried 15.6 and 16.6.

Ahmad Saleem

Comment 4 2023-11-01 16:13:35 PDT

Changed Comment 0 test case in JSFiddle and added to URL field as well. Broken in Safari Technology Preview 182 as well.

marcel laverdet

Comment 5 2023-11-03 18:18:21 PDT

Here is a simplified example of the other condition I was talking about. In this example I've removed `aspect-ratio` entirely but there is another problem. At the end of the scrollable div there is a great deal of extra empty whitespace. The client area of the div is 10256 which is what the div *would have been* if we didn't constrain the image dimensions with CSS. You can confirm by disabling the `height:100%` declaration in the inspector and observe that the size of .collection remains the same. My spidey senses tell me that this issue is related to the same one in the original comment but please let me know if I should open a new ticket. ``` <!doctype html> <html> <head> <style> .container { display: flex; overflow: auto hidden; height: 500px; } .collection { white-space: nowrap; } img { height: 100%; } </style> </head> <body> <div class="container"> <div class="collection"> <img src="https://staging.st.braidusercontent.net/i/vCnu2oMwmmAukqp-8-gUz3CtMII/53229687476_fa5af821aa_k.jpeg"> <img src="https://staging.st.braidusercontent.net/i/vCnu2oMwmmAukqp-8-gUz3CtMII/53229687476_fa5af821aa_k.jpeg"> <img src="https://staging.st.braidusercontent.net/i/vCnu2oMwmmAukqp-8-gUz3CtMII/53229687476_fa5af821aa_k.jpeg"> <img src="https://staging.st.braidusercontent.net/i/vCnu2oMwmmAukqp-8-gUz3CtMII/53229687476_fa5af821aa_k.jpeg"> <img src="https://staging.st.braidusercontent.net/i/vCnu2oMwmmAukqp-8-gUz3CtMII/53229687476_fa5af821aa_k.jpeg"> </div> </div> </body> </html> ```

marcel laverdet

Comment 6 2023-11-03 18:32:05 PDT

If you have any insight into the direct cause of this issue please do share. In my latest example the most modern CSS property is `display:flex` which is more than a decade old at this point. It seems like "rendering a container of images" should be easy pickings for most web browsers so I'm kind of bewildered that the repro example is really this simple. This issue is hitting us pretty hard and besides "don't use flex in any parent" we're kind of at an impasse. The workaround now is to directly provide a height & width for all images which are rendered in a container with other images.

alan

Comment 7 2026-05-13 07:59:22 PDT

Created attachment 479652 [details] Patch

alan

Comment 8 2026-05-13 10:58:22 PDT

Created attachment 479656 [details] Patch

alan

Comment 9 2026-05-13 14:54:09 PDT

Created attachment 479658 [details] [fast-cq]Patch

EWS

Comment 10 2026-05-13 19:36:38 PDT

Committed 313213@main (645e8793d617): <https://commits.webkit.org/313213@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 479658 [details].

Sammy Gill

Comment 11 2026-05-21 09:41:57 PDT

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/60060

Note You need to log in before you can comment on or make changes to this bug.