为什么Safari中CSS网格行高不同？

Question

我使用CSS Grid布局了困难的网格布局，其中网格项目的高度和宽度都不同。网格行1fr的高度设置为与网格高度成比例。某些网格项目具有grid-row: span 2或grid-row: span 3。

网格元素绝对位于包装纸的内部，并带有填充物，以保持长宽比。

在-ms-前缀的帮助下，这一切在Chrome和Firefox甚至IE中都可以完美运行。

在Safari中，情况有所不同：

但是，在Safari中，网格行的计算方式似乎并不相同-Safari浏览器中的行高比任何其他浏览器都长很多，短得多，这破坏了布局。为什么是这样？

从栅格元素删除绝对位置不会更改行高。但是，似乎放在height: 0网格包装上的行为会使行高在Safari中的行为与在Chrome和Firefox中的行为相同。这是什么原因呢？

码：

Codepen：https：//codepen.io/katrina-isabelle/pen/rRqvXq

.grid-wrapper {
  position: relative;
  padding-bottom: 60%;
}

.grid {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 29% 21% 21% 29%;
  grid-auto-rows: 1fr;
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 100%;
  color: #ccc;
  background: #ccc;
}
.grid-item--1 {
  grid-row: span 2;
}
.grid-item--2 {
  grid-row: span 3;
}
.grid-item--3 {
  grid-row: span 2;
}
.grid-item--4 {
  grid-row: span 3;
}
.grid-item--5 {
  grid-row: span 2;
}
.grid-item--6 {
  grid-row: span 3;
}
.grid-item--7 {
  grid-row: span 2;
}
.grid-item--8 {
  grid-row: span 2;
}
.grid-item--9 {
  grid-row: span 1;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid-item grid-item--1">
      Grid item
    </div>
    <div class="grid-item grid-item--2">
      Grid item
    </div>
    <div class="grid-item grid-item--3">
      Grid item
    </div>
    <div class="grid-item grid-item--4">
      Grid item
    </div>
    <div class="grid-item grid-item--5">
      Grid item
    </div>
    <div class="grid-item grid-item--6">
      Grid item
    </div>
    <div class="grid-item grid-item--7">
      Grid item
    </div>
    <div class="grid-item grid-item--8">
      Grid item
    </div>
    <div class="grid-item grid-item--9">
      Grid item
    </div>
  </div>
</div>

Answer 1

我在 Safari 12+ 中遇到了类似的问题，因为我还使用填充来强制基于网格的布局中的纵横比。我不确定这是否与您遇到的问题完全相同，但以下修复对我在 Safari 中的笔上适用。

TLDR：放在display:grid网格容器周围的 div 上。这是在行动：https : //codepen.io/harrison-rood/pen/rNxXWPb

在为此撕了几个小时的头发后，我决定尝试将display:grid包装纸放在我的主网格周围，效果很好！我不知道为什么这会解决它，但我的猜测是它在父容器上为 Safari 提供了更多上下文，并且允许height:100%引用网格上下文而不是父容器，类似于 Chrome 和 Firefox 在默认情况下的处理方式. 这让我感到非常沮丧，以至于我觉得有义务创建一个 SO 帐户，以便我可以发布此内容！希望能帮助到你！