Recently I've been needing to develop for iOS Safari, in which I found out that 100vh is not quite 100vh on there.
Now, there are fixes for this. Namely by using height: -webkit-fill-available, as demonstrated here. This however has the unfortunate side effect of also targetting Chromium-based browsers.
To fix that you can check for the support of -webkit-touch-callout: none. With that, only iOS and iPadOS Safari are targetted.
In order to make this much easier to use in Tailwind I created a plugin for it.
You can find the plugin here: https://www.npmjs.com/package/@rvxlab/tailwind-plugin-ios-full-height
Top comments (0)