vh-check

• the problem
• why not use viewport-units-buggyfill?
• use
  • as a global variable
  • as a commonJS module
  • as a ES module module
  • how it works
  • configuration
• example
  • in your javascript
  • in your CSS
• about browser support
• demo
  • github pages
  • local
• related

Browsers don't always compute the vh unit the same way. Some mobile browsers compute the vh CSS unit without taking care of the url bar. That means that a 100vh div will overflow the viewport by the size of the url bar.

This is the current behavior for:

• Safari iOS
• Chrome android >= 56

As explained in the chrome post, that make sense but make it hard to have a full hero top block.

This script will measure the difference and put it in a CSS var.

It's doing a very good job:

https://github.com/rodneyrehm/viewport-units-buggyfill

But it has some problems with media-queries:

rodneyrehm/viewport-units-buggyfill#13

<script src="https://unpkg.com/vh-check/dist/vh-check.min.js"></script>
<script>
  (function () {
    // initialize the test
    var isNeeded = vhCheck('vh-test');
  }());
</script>

npm install vh-check

var vhCheck   = require('vh-check');
// isNeeded will be true || false
var isNeeded  = vhCheck();

npm install vh-check

import vhCheck from 'vh-check';
const isNeeded  = vhCheck();

• It will update the vh-check CSS custom property if needed
• vh-check will be updated on orientation change
• vh-check will not be updated on scroll event

You can pass the CSS var name as a param to vhCheck() (default vh-check)

vhCheck('browser-address-bar')

In your CSS you will have to reference:

:root {
  --browser-address-bar: 0px;
}
main {
  min-height: calc(100vh - var(--browser-address-bar));
}

vhCheck()

:root {
  --vh-offset: 0px;
}
main {
  /* If you need to support browser without CSS var support */
  height: 100vh;
  /* enable vh fix */
  height: calc(100vh - var(--vh-offset));
}

• vh unit – supported since IE9+
• calc – supported since IE9+
• CSS custom properties – supported since IE Edge and iOS 9.3+ IE11 & below will need a fallback without CSS var
• concerned browsers – as for now:
  • Safari since iOS7+
  • Chrome Android since version 56

https://hiswe.github.io/vh-check/

• clone the project
• npm install
• npm run demo
• go to: http://localhost:8080

• ios-inner-height