vh-for-mobile
web-sparkle
part ofUsing VH as a CSS unit in mobile browsers causes a lot of problems. Fix them.
This is related to the same problem we're trying to fix with cross-browser-resize. Basically, when you're scrolling on a mobile browser, the address bar can change height and therefore change the viewport height, causing all sorts of visual updates.
This is especially a problem when you're styling elements using vh
as a unit,
ex. 100vh
for a full-screen hero image, and it's constantly jittering on scroll.
This fixes those problems by adding static inline height values and only recalculating
on orientationchange
.
Usage
$ npm install vh-for-mobile
Add the class vh-for-mobile
on all elements that you'd like to be affected, i.e.,
all the elements that use vh
as a style unit.
var VHForMobile = // or specify a parentdocument
Reference
new VHForMobile($parent)
A new instance of VHForMobile.
Params
- $parent
DOMElement
[optional] - the parent container of all your affected elements
Development
To run the example locally, run the following commands:
npm installnpm run devnpm start
Credits
This readme is maintained by hello@christinecha.com.
License
MIT