Почему высота строки CSS Grid отличается в Safari?
Я использовал CSS Grid для создания сложного макета сетки, где элементы сетки имеют разную высоту и ширину. Высота строк сетки установлена на 1fr, чтобы она была пропорциональна высоте сетки. Некоторые элементы сетки имеют grid-row: span 2 или grid-row: span 3.
Элемент сетки абсолютно позиционируется внутри оболочки с отступами, чтобы сохранить соотношение сторон.
Все это отлично работало в Chrome и Firefox и даже в IE с помощью префикса -ms-.
В Safari другая история:
Однако в Safari строки сетки, кажется, не вычисляются таким же образом — высота строк в Safari намного, намного короче, чем в любом другом браузере, что портит макет. Почему это?
Удаление абсолютной позиции из элемента сетки не меняет высоту строки. Но кажется, что размещение height: 0 в оболочке сетки приводит к тому, что высота строки в Safari ведет себя так же, как в Chrome и Firefox. В чем причина этого?
Код:
Кодовое слово: 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>@Demian Просто хотел отметить, что если вы проверите элементы, вы увидите, что элемент .grid расширяется, чтобы заполнить высоту своего родителя, это строки внутри сетки, которые не расширяются. Как бы вы воссоздали этот макет во flex?
С родительским флексом и дочерними встроенными флексами.
@Demian Хотелось бы увидеть пример. Я только что попробовал display: flex на .grid и display: inline-flex на .grid-items, и это сломало макет
Ответы 3
(Публикация в качестве ответа для включения изображений.)
Я получаю эти результаты с Safari и Chrome (Vivaldi) после предложенного вами исправления с настройкой height: 0. Как вы говорите, это увеличивает высоту div из почти свернутого состояния в Safari.
Мне интересно: это решение слева, к которому вы стремитесь, или оно должно быть как справа?
Если альтернатива слева — ваша цель, вы можете получить те же результаты, установив grid-auto-rows: auto на .grid.
Я предполагаю, что в обоих случаях (height: 0 и grid-auto-rows: auto) вы каким-то образом эффективно избегаете вычисления высоты как доли высоты .grid-wrappers.
Я не могу сказать, почему Safari делает это по-другому, но — прагматично — я бы лично рассмотрел возможность использования областей сетки вместо промежутков для размещения элементов — по крайней мере, если макет задан правильно.
Тот, что справа, является желаемым макетом. В одном слева похоже, что вы скопировали мой SCSS, но не включили препроцессор SCSS.
Не могли бы вы привести пример использования областей сетки вместо промежутков? Я новичок в сетке и не знаком с этой концепцией
Вместо height: 100% в контейнере сетки (.grid) используйте height: 100vh.
Или, если вы действительно хотите использовать проценты, убедитесь, что родитель имеет определенную высоту. Некоторые браузеры до сих пор придерживаются старого правила относительно высоты в процентах, а именно:
Элемент с высотой в процентах должен иметь родителя с определенной высотой в качестве контрольной точки, иначе высота в процентах будет игнорироваться..
Подробнее здесь:
- Работа со свойством CSS
heightи процентными значениями - Chrome/Safari не заполняет 100% высоты гибкого родителя
Во втором абзаце я упомянул, что пытаюсь сохранить соотношение сторон сетки, поэтому 100vh не подходит для моего варианта использования. Определение высоты в пикселях означает, что мне придется создавать много медиа-запросов, чтобы сохранить соотношение сторон, поэтому я использовал трюк с процентным заполнением. Я бы предпочел использовать трюк height: 0, чем писать все эти медиа-запросы
height: 100vh — это процент, но он относится к области просмотра. Другой вариант, который я представил, также является процентным, но реализован в соответствии с правилами спецификации.
Таким образом, родитель (.grid-wrapper) не имеет определенной высоты, потому что высота задается отступом — именно так поддерживается соотношение сторон. Любые идеи о том, как я могу сохранить соотношение сторон, если я определяю высоту родителя или .grid?
Кроме того, чтобы уточнить, сетка отображается с шириной 100%, поэтому соотношение сторон не будет поддерживаться, если высота зависит от высоты окна просмотра.
У меня была аналогичная проблема в Safari 12+, так как я также использовал отступы для принудительного соотношения сторон в макете на основе сетки. Я не уверен, что это та же проблема, что и у вас, но приведенное ниже исправление работает для меня на вашей ручке в Safari.
TLDR: поместите display:grid на div, окружающий контейнер сетки. Вот он в действии: https://codepen.io/harrison-rood/pen/rNxXWPb
После того, как я несколько часов рвал на себе волосы, я решил попробовать поместить display:grid на обертку вокруг моей основной сетки, и это сработало отлично! Я понятия не имею, почему это исправит это, но я предполагаю, что это дает Safari больше контекста в родительском контейнере и позволяет height:100% ссылаться на контекст сетки вместо родителя, подобно тому, как Chrome и Firefox обрабатывают это с помощью По умолчанию. Меня это так расстроило, что я почувствовал себя обязанным создать учетную запись SO, чтобы опубликовать это! Надеюсь, поможет!
Спасибо, что поделились этим решением! Как я уже упоминал в своем OP, вы также можете добавить height: 0, чтобы исправить это. Очень загадочно. Я думаю, что display: grid кажется лучшим подходом, но в любом случае никогда не помешает иметь несколько вариантов.
Супер странно, да? Я хотел бы знать, ПОЧЕМУ это работает, но пока я не смог это понять.
Вау, это сработало и для меня! Очень странно, но спасибо за решение!
Насколько я помню, Safari не нравится единица
%, которую вы использовали для.grid. В общем, я бы использовал для макетов сетки в сафариdisplay: flex. Но это только мои личные предпочтения.