| Summary: | position: absolute parent breaks flex child aspect-ratio | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | marcel laverdet <marcel.webkit> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | 709922234, ahmad.saleem792, bfulgham, sgill26, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | 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 | ||
Did this work in older Safari versions? > Did this work in older Safari versions?
Nope, I tried 15.6 and 16.6.
Changed Comment 0 test case in JSFiddle and added to URL field as well. Broken in Safari Technology Preview 182 as well. 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>
```
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. |
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> ```