为什么 Safari 中的 CSS Grid 行高不同？

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 帐户，这样我才能发布这个！希望对您有所帮助！

Answer 2

使用height: 100vh，而不是网格容器上的height: 100% (.grid)。

或者，如果您真的想使用百分比，请确保父级具有定义的高度。一些浏览器仍然遵守关于百分比高度的旧规则，即：

具有百分比高度的元素必须有一个具有定义高度的父元素作为参考点，否则百分比高度将被忽略。

更多细节在这里：

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

Answer 3

（作为答案发布以包含图片。） 在使用设置height: 0 遵循您建议的修复后，我使用 Safari 和 Chrome (Vivaldi) 获得了这些结果。正如你所说，这从 Safari 中几乎折叠的状态扩展了 div 的高度。

我想知道：您的目标是左侧的解决方案，还是应该像右侧的那样？ 如果左侧的替代方案是您的目标，您可以通过在.grid 上设置grid-auto-rows: auto 来获得相同的结果。 我猜在这两种情况下（height: 0 和grid-auto-rows: auto）你都在某种程度上有效地将高度计算转义为 .grid-wrappers 高度的分数。

我不能说为什么 Safari 会以如此不同的方式这样做，但是 - 务实 - 我个人会考虑使用网格区域而不是跨度来放置元素 - 至少在布局合理的情况下。