NEW 264043
position: absolute parent breaks flex child aspect-ratio 
https://bugs.webkit.org/show_bug.cgi?id=264043
Summary position: absolute parent breaks flex child aspect-ratio
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
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.
Note You need to log in before you can comment on or make changes to this bug.