CSS Dynamic Viewport Переключается на короткую высоту Viewport на Touch ⇐ IOS

[Anonymous]

Я работаю над меню Flayout на Mobile и сталкиваюсь с странным опытом, связанным с высотой просмотра. Меню расположено за пределами экрана с использованием следующего класса CSS: < /p>

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

.modal-filter-list {
background-color: #fff;
border: none;
display: none;
height: 100dvh;
left: -100vw;
max-height: 100lvh;
max-width: 80vw;
min-height: 100svh;
position: fixed;
top: 0;
width: 80vw;
z-index: 1200;
}

Я использую высоту 100DVH , поэтому меню приспособится к высоте вида, если панель инструментов браузера прячется после прохождения по странице. Когда кнопка нажата, чтобы открыть меню, класс iS-Open применяется для отображения:
@media (max-width: 769px) {
.modal-filter-list.is-open {
overflow: hidden;
position: fixed;
}
}

.modal-filter-list.is-open {
display: block;
left: 0;
}
< /code>
На этом скриншоте вы видите меню на полной высоте, потому что панель инструментов Safari скрыта (после того, как я начал снимать кнопку фильтра). < /p>
img alt = "Введите описание изображения здесь" src = "https://i.sstatic.net/yfhtlvux.png"/>
Но если я нажму в область двух вызовов Для кнопок действия внизу меню возвращается панель инструментов браузера, которая снова сокращает меню:

Вот демо меню с кодом .
i Не могу выяснить, является ли это ошибкой в ​​браузере или в моем коде. Я подозреваю последнее, так как я вижу другие меню на мобильном телефоне, которые не имеют этого странного опыта и могли бы использовать свежие глаза и перспективы.

Подробнее здесь: https://stackoverflow.com/questions/794 ... t-on-touch