postcss-100vh-fix

1.0.2 • Public • Published

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.

/postcss-100vh-fix/

    Package Sidebar

    Install

    npm i postcss-100vh-fix

    Weekly Downloads

    12,839

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.13 kB

    Total Files

    5

    Last publish

    Collaborators

    • ai