Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020

README.md

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. [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

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: 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 2: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-100vh-fix'),
    require('autoprefixer')
  ]
}

Step 3: Use height: 100vh or min-height: 100vh in your CSS.

About

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

Resources

License

You can’t perform that action at this time.