Bug 246303

Summary: sort.chimame.cafe layout is broken
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Broken Layout none

Description Ahmad Saleem 2022-10-10 15:30:19 PDT
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!
Comment 1 Alexey Proskuryakov 2022-10-10 18:24:10 PDT
Not a regression, Safari 15.6.1 behaves the same.
Comment 2 Karl Dubost 2022-10-11 22:56:39 PDT
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.
Comment 3 Karl Dubost 2022-10-11 23:42:11 PDT
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;
}
```
Comment 4 Radar WebKit Bug Importer 2022-10-17 15:31:23 PDT
<rdar://problem/101265850>
Comment 5 Ahmad Saleem 2023-03-19 07:24:36 PDT
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.