Как исправить проблему кроссбраузерности Safari IOS 9 overflow, 100vh?

Question

[z_u_l]

Суть проблемы: при клике по кнопке "Open menu" открывается меню. Но на Safari IOS оно почему-то урезается снизу. Читал, что Safari IOS считает по-другому высоту. Но всё равно не понимаю, как можно сделать, чтобы меню в overflow блоке не помещалось полностью, т.е. чтобы было как на chrome android.
ссылка на пример

Ios:


Android:

Comments

[Rustam Bainazarov]

Что Android Chrome, что iOS Safari считают viewport-единицы без учёта размеров схлопывающихся панелей навигации, поэтому, если панель присутствует на экране (как на скриншоте), то она будет поверх.

[z_u_l]

Рустам Байназаров, Понял. А это можно как-то исправить? Чтобы в IOS меню не заезжало за нижнюю панель?

Answer 1

[arsenty]

Либо JS, либо CSS вида padding-top/bottom. Изначально vh/vw это видимая часть экрана без учёта всяких перекрывающих поверх панелей навигации (тогда их ещё не изобрели).

Answer 2

[z_u_l]

Решил проблему так:

html {
height: 100%;
}

.m-openSideMenu {
min-height: 100%;
}
.m-openSideMenu .inner,
.m-openSideMenu .sidebar,
.m-openSideMenu .sticky {
height: 100%;
}

Позже выложу пример