hiswe/vh-check

mobile vh unit utility

vh-check

get reliable CSS vh sizes for 1kb gzipped

• 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
  • returned object
• example
  • in your javascript
  • in your CSS
• configuration
  • as a string
  • as an object
    • cssVarName
    • force
    • bind
    • redefineVh
    • updateOnTouch
    • onUpdate
• about browser support
• demo
  • github pages
  • local
• caveats
• other stuff
  • changelog
  • migrating
  • run the tests
  • thanks
  • related

the problem

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. You can read more on this css-trick article by Louis Hoebregts

why not use viewport-units-buggyfill?

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

use

as a global variable

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

as a commonJS module

npm install vh-check

var check = require('vh-check')
var test = vhCheck() // return an object (see below)

as a ES module module

npm install vh-check

import vhCheck from 'vh-check'
const test = vhCheck()

how it works

• It will update the vh-check CSS custom property if needed
• vh-check will be updated on orientationchange event
• vh-check will not be updated on scroll event by default

returned object

vh-check will return a full object:

{
  isNeeded: false,
  // wether or not it's needed
  value: 0,
  // the CSS var value
  vh: 480,
  // a 100vh div size
  windowHeight: 480,
  // same value as window.innerHeight
  offset: 0,
  // difference between the above sizes
  recompute: function computeDifference(),
  // call this to programmatically get all the values and set the CSS var
  // - this can be useful if you want to add your own listeners
  //   that will trigger a computation
  unbind: function unbindVhCheckListeners(),
  // call this to remove any window listeners created by vh-check
},

example

in your javascript

vhCheck()

in your CSS

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

configuration

as a string

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

vhCheck('browser-address-bar')

In your CSS you will have to reference:

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

as an object

vh-check allows you to have more control by passing a configuration object.

vhCheck({
  cssVarName: 'vh-offset',
  force: false,
  bind: true,
  redefineVh: false,
  updateOnTouch: false,
  onUpdate: function noop() {},
})

cssVarName

type: string
default: 'vh-offset'

Change the CSS var name

force

type: boolean
default: false

Set the CSS var even if 100vh computation is good

bind

type: boolean
default: true

Automatically bind to orientationchange event

redefineVh

type: boolean
default: false

Change the CSS var value. Instead of being the total size of the gap, it will be 1% of the real window size.
You can find more explanation in this CSS Trick article

⚠️ Important

If you don't set a cssVarName, the CSS custom property will be named vh instead of vh-offset.
So your CSS should be:

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

updateOnTouch

type: boolean
default: false

Add an event listener on touchmove to recompute the sizes

⚠️ Important

• This can impact your website performances as changing sizes will make your browser reflow
• if options.bind is false, this will be ignored as well

onUpdate

type: function
default: function noop(){}

you can specify a callback which will be called with an updated vh-check object every time a computation occurre.

about browser support

This library require requestAnimationFrame which is IE10+ You'll need a polyfill if you want to support older browsers

• 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 >= v56

To sum it up:

Browser	Library will work	CSS Custom property
<= IE 9	❌	❌
IE 10 & IE 11	✅	❌
IE Edge	✅	✅
< iOS 9.3	✅	❌

demo

github pages

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

local

you'll need node

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

caveats

On iOS only, Chrome & Firefox will change dynamically the size of 1vh depending on the display of the address bar.
Thus the library will return a not needed value.

If you want to prevent your vh's components to resize, you could fix the size of the unit like this:

vhCheck({
  bind: false,
  redefineVh: true,
})

.my-div {
  height: calc(var(--vh, 1vh) * 100);
}

other stuff

changelog

See CHANGELOG.md

migrating

See MIGRATING.md

run the tests

• clone the project
• npm install
• npm test

thanks

• Chris Butterworth for the contribution

related

• ios-inner-height

vh-check's Issues

Docs: bind boolean value

https://github.com/Hiswe/vh-check#bind

There is default: find. Instead should be default: true

as find is not a boolean.

Get if the bottom bar is opened or closed

Hello, there's a way to check if the bottom bar is opened or closed based on scroll event?

Thank you!

gap doesn't reevaluate on scroll

On iPad tabs auto-hide when scrolling.
And so the gap will reduce ¬_¬'

fix documentation

#2

@supports not working on iOS 9.3.2?

My test case isn't calculating?

min-height: calc(98vh);@supports (height: var(--vh-offset)) {min-height: calc(98vh - var(--vh-offset));background: red;};

(@supports and its styles are crossed out in the Web Inspector. (background:red is for debugging)).

Bottom gap on mobile Firefox

I’m testing the mobile demo site on Firefox for iOS on a iPhone XR and I notice a bottom gap (see the black bar).

root object in factory is undefined

Hi There,

Thanks for the great script. I Tried to use it in normal js environment without CommonJS / RequireJS. If I do so, I get an exception at line 7 ( root.vhCheck = factory(); )

"Factory is undefined"

Any idea, what I am doing wrong?

IE11 - Object doesn't support property or method 'assign'

Just tried to upgrade from 1.1.3 to 2.0.1 but get the following error in IE 11.

Value changes on zoom

The value changes on zoom when updating on scroll.

TESTS – add for real browsers starting at IE11

updateOnTouch only works when i touch again

Hi,

When i touch and drag first time, nothing happens... But when i touch and drag again, updateOnTouch works fine.

Have some way to make updateOnTouch works more fast?

Don't write <style> tag

document.documentElement.style.setProperty(--${this.name}, this.value + 'px');

should allow another way of computing the size

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Issues with TypeScript

Issue 1:
In TypeScript,
import vhCheck from "vh-check";

Will result in the error:
Could not find a declaration file for module 'vh-check'.

Adding the following in package.json will resolve the issue:
"typings": "dist/vh-check.d.ts",

Issue 2:
Compiling the app with vh-check will result in the error:

ERROR in xxx/node_modules/vh-check/dist/vh-check-types.d.ts
A rest parameter must be of an array type.
> 1 | export declare type Callback = (...arg: any) => void;

Modifying the first line of vh-check-types.d.ts as below fixes the issue:
export declare type Callback = (arg: any[]) => void;

Versions:
[email protected]
[email protected]

Not working on new chrome ios

Hey, just found this a few days and think it's great and solves a very annoying problem. However it seems to not be working on the newly updated google chrome V69.0.3497.105 for ios

usefullness check

Hello,

Very useful script, but does line 40 should exist?
I guess it says to return nothing when offset is 0, but CSS expects some value and fails when there isn't any.
I got it working by deleting 'usefullness check'...

All iphone phones with full screen cannot use this set of plug-ins.

All iphone phones with full screen cannot use this set of plug-ins.（With a gesture bar.）

Is there any reason to use `@supports` here?

You have this example:

:root {
  --vh-offset: 0px;
}
main {
  min-height: calc(100vh);
  @supports (height: var(--vh-offset)) {
    min-height: calc(100vh - var(--vh-offset));
  }
}

but it seems like it should work just as well without @supports:

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

• If var() is not supported, that second value will be ignored, leaving you with the first 100vh value.
• If var() is supported, but vh-offset isn't needed, it will be set to 0px still, and have no effect.

DOC – add a mention of the CSS fallback

Does not work in iOS Chrome

Not working for iOS Chrome 74.0.3729.155.

This is because window.innerHeight has not been updated when an orientationchange event occurs. There is a workaround below, but I'd like to see it implemented in the library.

Workaround:

var test = vhCheck({
  onUpdate: (obj: any) => {
    orientationChanged().then(() => {
      const cssVarName = "vh-offset";
      const sizes = my.vhCheck.recompute();
      document.documentElement.style.setProperty(`--${cssVarName}`, `${sizes.value}px`);
    });
  }
});

See this for the orientationChanged function: https://stackoverflow.com/a/44579732

NPM – shouldn't have .vscode folder published on npm

calling multiple times vhCheck() will bind multiple time the orientationchange event

publish on npm

Does not work correctly in a PWA standalone web app

When having a PWA standalone app (display property value is standalone in manifest.json as written in here https://developer.mozilla.org/en-US/docs/Web/Manifest/display) then this library does not work as expected - since address bar does not exist then things are calculated incorrectly.

Help: How can I use it with sass or vue?

I feel like I'm dumb.. I even asked it on StackOverflow but had no luck.

How would you use this when you are using sass/scss or vue?

Let us say I have this:

<style>
	:root {
	  --vh-offset: 0px;
	  --vh: 1vh;
	}
	.f-body #app{
		min-height: calc(100vh - var(--vh-offset));
	}
</style>

it always compiles to min-height: calc(100vh - 0px));

Because of this, the offset from javascript cannot work.

Thank you for reading/helping!

Doesn't apply to Chrome / Android

AFAIK, Chrome on mobile browsers also has this behavior. See: https://developers.google.com/web/updates/2016/12/url-bar-resizing

So this shouldn't be an "iOS" gap, but should apply to all mobile browsers that have "vh" mean "viewport height as if the address bar was hidden".

isNeeded = false for iPhone/Safari when target=_blank

isNeeded is evaluated to be false when opening a page within a new window, and the whole thing does not work as a result. For me, it happens in iPhone/Safari.

Workaround is to set force: true in the config depending on the User Agent,
or use setTimeout or window.requestAnimationFrame to delay calling vhCheck.

Publish actual code to NPM

Although (at least some) earlier versions published to NPM include the actual library, the latest (v1.1.2) doesn't appear to contain the library itself (no dist or src folders). Can you please publish a new version which includes the code, so that npm i vh-check will result in a usable version being installed?

Doesn't seem to work on Iphone X

HI, We implemented vh-check in our webapp and tried it on iphone 8 and iphone X. It seems to work on iphone8 Safari but on iphoneX the height doesnt seem to adjust. I am not very familiar with the js used here but the fact that we are seeing it work on iphone8 tells me that we have implemented it correctly on our side. Any ideas why iphoneX is behaving differently?