PostCSS 100vh Fix

[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

Limits

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:

Usage

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.