Fixing WebKit and a height of 100vh
When using a 100 percent the viewport height, WebKit and therefore Safari theoretically handle the styling just fine. But if you also want to respect the safe area insets, which are quite important on mobile, a visual inconsitency becomes visible.
As this progressive web app uses Tailwind.css, I’ll show you how to correctly use 100vh in Safari respectively WebKit while also respecting the safe area, so that your web app looks dandy on all screens.
Using a PostCSS-plugin
I recommend using the plugin “postcss-100vh-fix” plugin. As you’ve already set up a postcss-config with Tailwind’s initialization, this solution fits quite natural and uses the least amount of time to fix the viewport height issue.
// 1. Install the dependency
// npm i postcss-100vh-fix
//
// Then use a custom PostCSS-config.
// This example assumes you only have
// one custom plugin, which leads to
// the following config.
module.exports = {
plugins: [
require("postcss-100vh-fix")
],
};
A note for all Next.js-users
If you’re using Tailwind with Next.js, there’s a slight modification you have to apply to your PostCSS-config to make things work. Instead of using imports via “require”, you have to use the package’s name as a string in the array of plugins. Furthermore, you don’t have to include all of Tailwind’s own plugins that come by default, as they’re appended by Tailwind automatically.
// Effectively the same config,
// but now compatible with Next.js,
// which only accepts strings for
// plugins, where they represent their
// package name.
module.exports = {
plugins: ["tailwindcss","autoprefixer","postcss-100vh-fix"],
};
// ... in your app ...
// Now all that's left to do is
// apply the screen-height, which
// results in a '100vh'-value:
//
// ... <div class="h-screen"> ...
Another arguably uglier solution
While the following is definitely not recommended, I just show you how it’s technically possible in another way, too. The following code doesn’t require any plugins or changes to your postcss-config, but requires some Javascript and breaks out of Tailwind’s syntax, at least in this example without any optimizations.
// Manually setting the 'style':
//
function View(){
const isMobileWebKit = useIsMobileWebkit();
return (
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> /* ... */ </div>;
}
/*
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> ...
*/
// This is the hook to determine
// if we're in a WebKit-env:
export function useIsMobileWebkit() {
const [flag, setFlag] = useState(false);
useEffect(() => setFlag(isMobileWebkit()), []);
return flag;
}
And we’re done
This article provides a quick guide on how to fix a small but arguably annoying visual error on WebKit when using 100 percent of the viewport’s height while also respecting the safe area’s insets. I hope you liked this article, be sure to check other interesting guides and examples listed below.
