There’s a fix for 100vh on mobile WebKit (iOS/iPadOS Safari)

See There’s a fix for 100vh on mobile WebKit (iOS/iPadOS Safari) on allthingssmitty.com

Safari had an issue where viewport units would ignore the bottom bar, an issue they don’t plan on fixing. Matt discovered a possible fix in which you set another min-height to -webkit-fill-available.

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

I expected this to only use the =webkit-fill-availible in iOS Safari, but it was acting strange when I got to Google Chrome. I’ll hold of on it for a bit.