Skip to content

PostCSS plugin to fix height/min-height: 100vh on iOS

License

Notifications You must be signed in to change notification settings

postcss/postcss-100vh-fix

Repository files navigation

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;
  }
}

100vh bug illusration Max Schmitt

It works with min-height and max-height too.

Sponsored by Evil Martians

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:

100vh Chrome bug illusration David Chanin

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.