iOS Safari Full Height Bug Fix

Level:
Einfach 👌
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link

Mir ist schon bei einigen Page Transitions und vollflächigen Hintergrund DIVs aufgefallen, dass Safari auf iOS Geräten wie dem iPhone ziemlich Probleme hat, die Einheit VH richtig zu interpretieren. Was wir ja oft mit VH meinen, ist, er soll ein Element in der kompletten Höhe des Browsers darstellen. Bei iOS haben wir aber eine bewegliche Tab-Bar im unteren Bereich, die verschwindet, sobald der Seitenbesucher scrollt. Erst beim aufwärts Scrollen kommt sie wieder zum Vorschein. Deshalb ist 100vh oft nicht gleich die komplette Höhe. Die bessere Lösung ist hier 100% zu nutzen und auf vh zu verzichten. Im Video zeige ich dir wie.