[PostCSS] plugin to fix [iOS’s bug] with 100vh
.
It works in Chrome (just -webkit-fill-available
causes problems in Chrome
in some cases), iOS/iPad/MacOS Safari and [all other browsers].
Pure CSS solution, no JS required.
body {
/* Footer will be hidden on iOS Safari because of bottom panel */
height: 100vh;
}
body {
height: 100vh;
}
/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
body {
/* The hack for Safari */
height: -webkit-fill-available;
}
}
It works with min-height
and max-height
too.
[all other browsers]: https://caniuse.com/#feat=viewport-units
[iOS’s bug]: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
[PostCSS]: https://github.com/postcss/postcss
Pure CSS solution is limited. For many cases you need to use JS-based hack like
postcss-viewport-height-correction
:
Our hack do not work with partial height like height: 90vh
or height: calc(100vh - 60px)
.
Also, we do not fix Chrome for Android bug:
Step 1: Install plugin:
npm install --save-dev postcss postcss-100vh-fix
Step 2: Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss"
section in package.json
or postcss
in bundle config.
If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.
Step 3: Add the plugin to plugins list:
module.exports = {
plugins: [
+ require('postcss-100vh-fix'),
require('autoprefixer')
]
}
Step 4: Use height: 100vh
or min-height: 100vh
in your CSS.