height: 100% чуть-чуть поломало вёрстку 🙈Я делала простую сетку: контейнер
display: grid, строки — grid-template-rows: repeat(n, auto), в одной ячейке был элемент, которому я прописала height: 100%, чтобы он «растянулся красиво». В Chrome всё было отлично, а вот в Safari макет разъехался. ☹️Сначала показалось: «ну вот, опять баг браузера». Но если копнуть глубже, окажется, что никакой мистики: всё упирается в одно правило CSS.
Что же случилось?
height: 100% — это 100% от высоты родителя. И здесь есть ключевой момент: процентная высота работает только если у родителя есть определённая высота — то есть та, которую можно вычислить без учёта содержимого.А что у нас? Auto-строка в grid как раз получает свою высоту по содержимому во время layout, поэтому её высота заранее неизвестна. В итоге получаем цикл:
✔️ строка ждёт размера ребёнка,
✔️ ребёнок просит 100% от строки,
✔️ но строка ещё не знает своей высоты — и всё зависает.
➡️ Проценту просто не от чего считаться.
Почему в разных браузерах результат отличается?
Разные движки могут по-разному разрешать такие размерные циклы.
В одних случаях результат выглядит «нормально», в других — проблема становится заметной.
Как итог, это не баг конкретного браузера. Это различия реализации алгоритма вычисления размеров в ситуациях, где возникает зависимость.
А как же решить эту проблему? Нужно дать проценту опору — то есть сделать высоту родителя определённой. 👍