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.