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

Question

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

网格元素绝对位于包装内部，并在其上填充以保持纵横比。

这一切都在Chrome和Firefox中完美运行，甚至在IE中借助-ms-前缀。

在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

（发布作为答案，以便包括图片。）我通过设置height: 0遵循建议的修复后，通过Safari和Chrome（Vivaldi）获得这些结果。正如你所说，这会扩展div的高度，使其免受Safari中几乎崩溃的状态的影响。

我想知道：这是你想要的左边的解决方案，还是应该是在右边？如果左边的替代方案是你的目标，你可以通过在grid-auto-rows: auto上设置.grid获得相同的结果。我想在两种情况下（height: 0和grid-auto-rows: auto）你都会以某种方式有效地将高度计算作为.grid-wrappers高度的一部分。

我不能说为什么Safari以这样一种不同的方式做到这一点，但是 - 务实 - 我个人会考虑使用网格区域而不是跨度来放置元素 - 至少如果布局得到公平的话。

Answer 2

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

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

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

更多细节在这里：

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