带有子网格和溢出的 CSS 网格在 Safari 上会中断，但适用于所有其他浏览器

Question

我正在构建一个带有子网格的嵌套CSS网格，但是当在子网格上使用

overflow:auto

时，整个事情在Safari上都会中断。
在 Chrome/FireFox 上，它工作得很好，但在 Safari 上，它会崩溃，并且由于某种原因，当我删除

overflow: auto;

时

它适用于 Safari ..但我需要这些溢出，因为我只想网格主体滚动。什么会导致它在 Safari 上崩溃？

尝试以下代码：

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>

在 Chrome 上运行它（运行良好），在 Safari 上运行它（中断）。

预计在 Safari 上也能正常工作

图片：

在 Safari 上

在 Chrome/Firefox 上

Answer 1

我遇到了同样的问题，但最新的 Safari 技术预览版似乎解决了这个问题。有根据的猜测让我相信 WebKit 中的此提交解决了问题。

Answer 2

今天（2024 年 5 月 12 日）在 MacOS 上的 Safari 上测试时，此问题似乎已得到修复