Почему в Safari высота строки CSS-сетки отличается?

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: 100% в сеточном контейнере (.grid) используйте height: 100vh.

Или, если вы действительно хотите использовать проценты, убедитесь, что родитель имеет определенную высоту. Некоторые браузеры все еще придерживаются старого правила относительно высоты в процентах, а именно:

Элемент с процентной высотой должен иметь родителя с определенной высотой в качестве контрольной точки, иначе процентная высота будет игнорироваться .

Подробнее здесь:

• Работа со свойством CSS height и процентные значения
• Chrome / Safari не заполняет 100% высоты гибкого родителя

Answer 2

(Публикация в качестве ответа для включения изображений.) Я получаю эти результаты с Safari и Chrome (Vivaldi), после того, как вы предложили исправить с настройкой height: 0.Как вы говорите, это увеличивает высоту div'ов из почти свернутого состояния в Safari.

Мне интересно: это решение слева, к которому вы стремитесь, или оно должно быть как справа?Если альтернативой слева является ваша цель, вы можете получить те же результаты, установив grid-auto-rows: auto на .grid.Я предполагаю, что в обоих случаях (height: 0 и grid-auto-rows: auto) вы каким-то образом эффективно избегаете вычисления высоты как доли высоты .grid-wrappers.

Я не могу сказать, почему Safari делает это в такой степенипо-другому, но - прагматично - я бы лично подумал об использовании областей сетки вместо промежутков для размещения элементов - по крайней мере, если макет задан правильно.