align-self не выравнивает содержимое в контейнере с высотой 100% в Safari

Question

У меня есть раздел, содержащий тег изображения. Тег изображения создается с помощью srcSet изображений для адаптивного дизайна и использования нескольких изображений без загрузки изображений, которые не используются.

Нам нужно центрировать текст в указанном контейнере, поэтому у меня есть div с display: grid внутри. Это абсолютное позиционирование и использование height: 100% и width: 100%.

Использование align-self: center на дочернем элементе отлично работает на Chrome и Firefox, но, к моему удивлению, Safari решила не сотрудничать. Я обнаружил, что если я устанавливаю раздел (или сетку) на заданную высоту (ie: height: 5000px), он фактически выравнивается по центру div, что заставляет меня думать, что Safari не хочет align-self: center и div неизвестного размера.

Есть несколько способов решить эту проблему, но мы используем нашу собственную библиотеку, которая использует сетку, поэтому я хотел бы решить ее, используя align-self: center, поскольку мы можем просто передать опору в компонент React.

Ребята, вы знаете обходной путь?

Здесь я оставил скрипку. Если вы посетите его на Chrome или Firefox, он работает, но если вы посетите его в Safari, это не так. Я также прокомментировал строку, в которой я установил заданную высоту c, чтобы доказать, что она работает с ней в Safari.

Спасибо!

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

Answer 1

Проблема в том, что Safari не распознает процентную высоту, если родительский элемент не имеет определенной высоты. Это старая школа CSS. Другие браузеры вышли за рамки этого требования и теперь принимают другие ссылки для процентной высоты.

Итак, если вы собираетесь использовать процентную высоту для .grid, родителю нужна фиксированная высота, чтобы он работал Сафари. Или установите процентную высоту для предков вплоть до элемента root.

/* NEW */
html, body, .container, img {
  height: 100%;
}

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

Подробнее:

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