css grid with subgrid and overflow breaks on safari but works on all other browsers

Question

I'm building a nested css grid with subgrids, but when using overflow:auto on the subgrid, the whole thing breaks on Safari.
On Chrome/FireFox it works great, but on Safari it breaks, and for some reason when I remove the overflow: auto;

it works on Safari.. but I need those overflow since I want only the grid body to scroll. what can cause it to break on Safari ?

try this code for example:

CSS:

.main-grid {
    height: 100px;
    width: 500px;
    display: grid;
    grid-template-columns: minmax(4ch, 1fr) minmax(4ch, 1fr) minmax(min-content, 1fr);
    grid-template-rows: auto 1fr;
}

.sub-grid-1 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}

.sub-grid-2 {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: minmax(30px, 10%);
    grid-column: 1/-1;
    background-color: blue;
    overflow: auto;
}

.sub-sub-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: subgrid;
    grid-column: 1/-1;
    background-color: yellow;
    border: 1px solid black;
}

HTML :

<div class="main-grid">
   <div class="sub-grid-1">     
      <span>Header 1</span>
      <span>Header 2</span>
      <span>Header 3</span>
   </div>
   <div class="sub-grid-2">
      <div class="sub-sub-grid">
         <span>1</span>
         <span>2</span>
         <span>3</span>
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
   </div>
</div>

Run it on Chrome (Works well), run it on Safari (Breaks).

Expected to work well on Safari as well

Images:

On Safari

On Chrome/Firefox

Answer 1

I was experiencing the same problem, but the latest Safari Technical Preview appears to fix this. An educated guess leads me to believe that this commit in WebKit fixes the problem.