100vh на ios safari
Обзор глюка 100vh в ios safari
Суть такая — имеем интерфейс, в котором будут полноэкранные всплывахи (даже не всплывахи, а замещахи) с кнопками и беспощадный safari на ios.
Итак, в css делаем высоту замещахи 100vh, выключаем полосы прокрутки (position:relative; height:100%; overflow:hidden;) и запускаем:
Казалось бы всё ок! Однако через долю секунды видим такую дичь:
Какое странное у safari понятие viewport.
Вообще проблема известная, один чел даже целый лог собрал. На данный момент нормального решения проблемы попросту не существует, поскольку такие приколы с viewport имеются не только у safari (firefox насколько мне известно тоже отличился). По ссылке чуваки предлагают по сути захардкодить высоту через media правила.
Конкретно в моём случае я отделался установкой height: 100% вместо 100vh (100vh имеется у родительских элементов).
Вот как оно стало в итоге выглядеть:
Дичь, не правда–ли?