Bug 246303

Not a regression, Safari 15.6.1 behaves the same.

note that there is a firefox layout issue. I opened https://github.com/webcompat/web-bugs/issues/112208 About the safari issue this is not always happening for me at first load. So I wonder if there is a race issue of some sort when computing the layout.

There's a set of flex and grid for this layout. ``` .sorter { margin: 0px auto; display: grid; grid-template-columns: 31% 34.5% 31%; place-content: space-between; width: 80%; } .container { display: flex; flex-flow: column nowrap; align-items: center; margin-top: 1em; } .options { margin: 1em auto; display: grid; text-align: left; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: 50%; } ``` It goes like this ``` <div class="container"> … cut for brevity … <div class="sorter"> <div class="starting start button"> <!-- CENTER COLUMN --> </div> <div class="left sort image"> <!-- LEFT COLUMN --> <div class="loader-outer"> <div class="loader"> <span class="loader-inner"></span> </div> </div> <iframe width="240" src="https://www.youtube.com/embed/ZjH7UErJshA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" ></iframe> <img /> </div> <div class="right sort image"> <!-- RIGHT COLUMN --> <div class="loader-outer"> <div class="loader"> <span class="loader-inner"></span> </div> </div> <iframe width="240" src="https://www.youtube.com/embed/2XXtRdHcWbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" ></iframe> <img /> </div> … cut for brevity … </div> <div class="options"> … cut for brevity … </div> </div> ``` The height of the columns are 750.9375px I'm not sure why .sort.image iframe, iframe.sort.image { background-image: url("https://sort.chimame.cafe/src/assets/not-available.jpg"); } The background image in case the iframe is not working is shorter than this. Ultimately this is the iframe making this thing behaves strangely. I'm not sure why they created 7 rows for this layout. but ultimately this is fixing it. ``` .sorter > .image { width: 100%; height: 100%; margin: auto; /* grid-row: 1 / 7; */ grid-row: 1 / 2; cursor: pointer; } .starting.start.button { /* grid-row: span 6; */ grid-row: span 1; } ```

<rdar://problem/101265850>

I might have some local patches making this better on WebKit ToT (261835@main) or maybe not but now we only have stretched out images in containers but ‘Filters’ are not overlapping anymore with containers.

The part which is making high. This is one of the 3 columns of the grid: the central but which is first in the markup. <div class="starting start button"> <img class="home-img" style="max-width: -webkit-fill-available" src="src/assets/gochiusa-headphones.jpg"> <h3>Gochiusa Music Sorter</h3> <h2>Click Here to Start!</h2> </div> The image has ``` .home-img { max-width: -webkit-fill-available; max-width: -moz-available; border-radius: 300px; user-select: none; } ``` then there is still the style attribute. ``` style="max-width: -webkit-fill-available" ``` The image size is 710 pixels by 710 pixels. https://sort.chimame.cafe/src/assets/gochiusa-headphones.jpg The image in the grid is 276.64px by 710 pixels. So basically the grid height doesn't maintain the aspect-ratio of the image after the max-width.