Bug 246303 – sort.chimame.cafe layout is broken

• Status: NEW
• Component: Layout and Rendering

[Ahmad Saleem]

Created attachment 462915 [details]
Broken Layout

Hi Team,

Came across a thread on Twitter, which mentioned following webpage, which has broken layout in Safari 16 and then I tested and it is broken in Safari Technology Preview 155 as well.

Link - https://sort.chimame.cafe/

Twitter Link - https://twitter.com/darkpiiiii/status/1579472475083407361?s=61&t=3i_GAKiGmnn79cA6v2rbWw

Other browsers (Chrome Canary 108 and Firefox Nightly 107) render this page perfectly and in case of Safari, the controls are pushed above to containers while both side containers with Youtube Video embedded are expanded beyond middle containers.

NOTE - Opening Safari DevTools push the page above and then page render similar to other browsers. So it might be visual viewport issue.

I don't have any minimal test case though.

Thanks!

[Alexey Proskuryakov]

Not a regression, Safari 15.6.1 behaves the same.

[Karl Dubost]

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.

[Karl Dubost]

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;
}
```

[Radar WebKit Bug Importer]

<rdar://problem/101265850>

[Ahmad Saleem]

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.