264043 2023-11-01 09:52:16 -0700 position: absolute parent breaks flex child aspect-ratio 2024-04-11 18:45:28 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Mac (Apple Silicon) macOS 14 NEW https://bugs.webkit.org/show_bug.cgi?id=272527 https://jsfiddle.net/390wb164/show InRadar P2 Normal --- 1 marcel.webkit webkit-unassigned 709922234 ahmad.saleem792 bfulgham sgill26 simon.fraser webkit-bug-importer zalan oldest_to_newest 1989176 0 marcel.webkit 2023-11-01 09:52:16 -0700 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> ``` 1989206 1 simon.fraser 2023-11-01 11:39:55 -0700 Did this work in older Safari versions? 1989207 2 webkit-bug-importer 2023-11-01 11:40:06 -0700 <rdar://problem/117807518> 1989254 3 marcel.webkit 2023-11-01 14:14:23 -0700 > Did this work in older Safari versions? Nope, I tried 15.6 and 16.6. 1989291 4 ahmad.saleem792 2023-11-01 16:13:35 -0700 Changed Comment 0 test case in JSFiddle and added to URL field as well. Broken in Safari Technology Preview 182 as well. 1989871 5 marcel.webkit 2023-11-03 18:18:21 -0700 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> ``` 1989874 6 marcel.webkit 2023-11-03 18:32:05 -0700 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.