iOS Safari: для наложения, такого как всплывающее меню, 100vh не работает должным образом и скрывается под строкой меню 44px в сафари

Question

Проблема в том, что 100vh неправильно обрабатывается в iOS Safari. Он неправильно вычисляет высоту до нижней части строки меню сафари [внизу] и отображает всплывающее меню до нижней границы строки меню. Это приводит к частичному скрытию меню и создает проблему при разработке всплывающего всплывающего меню для кросс-устройств, использующих 100vh. подробности здесь | подробнее здесь

Итак, ищем альтернативное решение без использования 100vh, чтобы оно работало во всех браузерах и платформах.

Answer 1

Я решил эту проблему, установив для меню высоту окна ['innerHeight'] + 'px' вместо использования 100vh.

Затем я обновляю высоту при изменении размера браузера [псевдокод ниже]

addEventListener ('resize', () => menu.style.height = window ['innerHeight'] + 'px');

Это прекрасно работает во всех браузерах и мобильных устройствах.