Несоответствие рендеринга между Safari iOS, Safari MacOS и Chrome ⇐ CSS

[Anonymous]

Я создаю веб-сайт с личным портфолио и хочу убедиться, что мой сайт адаптирован как для мобильных устройств, так и для настольных компьютеров. После использования инструментов разработчика Chrome, чтобы убедиться, что интервалы выглядят хорошо на различных мобильных устройствах, я проверил, как выглядит сайт в мобильном симуляторе Safari, и увидел, что макет выглядит очень странно (см. изображение ниже).
Я предполагаю, что это связано с неправильным использованием стилей CSS -webkit, но я не могу найти, что применить. Родительский контейнер правильно имеет размер 100vh, однако дочерний элемент должен расти, чтобы заполнить контейнер, и ему явно не хватает этого.

Код: Выделить всё

{content}


Get in touch

Выше приведены стили HTML и Tailwind, которые я сейчас использую (минимальный воспроизводимый пример). Возможно, я что-то упустил или мои предположения неверны относительно того, как flex-grow должен работать в Safari. / mobile?
Ссылки на действующий сайт
и код.
Эта проблема наблюдается в большинстве разделов сайта. на мобильных устройствах, но наиболее заметно в нижнем колонтитуле компонент.



Подробнее здесь: https://stackoverflow.com/questions/793 ... and-chrome