CSS Dynamische Ansichtsfensterhöhe Schalter zur kurzen Ansichtsfensterhöhe auf Berührung ⇐ CSS

[Guest]

Ich arbeite an einem Fly-out-Menü auf dem Handy und bin auf eine seltsame Erfahrung im Zusammenhang mit der Ansichtsfensterhöhe begegnet. Das Menü wird mit der folgenden CSS-Klasse außerhalb des Bildschirms positioniert: < /p>

Code: Select all

.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;
}

Ich verwende eine Höhe von 100DVH damit das Menü an die Ansichtsfensterhöhe angepasst wird, wenn sich die Browser -Symbolleiste nach dem Wischen auf der Seite versteckt. Wenn die Schaltfläche zum Öffnen des Menüs geöffnet ist@media (max-width: 769px) {
.modal-filter-list.is-open {
overflow: hidden;
position: fixed;
}
}

.modal-filter-list.is-open {
display: block;
left: 0;
}
< /code>
In diesem Screenshot sehen Sie das Menü in voller Höhe, da die Symbolleiste von Safari versteckt ist (nachdem ich mit dem Wischen zum Filtertaste angefangen habe). IMG Alt = "Bildbeschreibung hier eingeben" src = "https://i.static.net/yfhtlvux.png"/>
, aber wenn ich den Bereich der beiden Anrufe tippe Zu den Aktionsschaltflächen unten im Menü kehrt die Browser -Symbolleiste zurück, die das Menü erneut schrumpft:

Hier ist eine Demo des Menüs mit Code .
i Ich kann nicht herausfinden, ob dies ein Fehler im Browser oder in meinem Code ist. Ich vermute das letztere, da ich andere Menüs auf dem Handy sehe, die diese seltsame Erfahrung nicht haben und frische Augen und Perspektive gebrauchen könnten.