You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
vh-check - npm Package Compare versions
Comparing version 1.1.2 to 1.1.3
@@ -8,2 +8,3 @@ (function (global, factory) { | ||
| function testVh() { | ||
| // test with fixed | ||
| var fixedTest = document.createElement('div'); | ||
@@ -15,2 +16,3 @@ fixedTest.style.cssText = 'position: fixed; top: 0; bottom: 0;'; | ||
| ); | ||
| // test with vh | ||
| var vhTest = document.createElement('div'); | ||
@@ -22,5 +24,7 @@ vhTest.style.cssText = 'position: fixed; top: 0; height: 100vh'; | ||
| ); | ||
| // in iOS vh will be bigger | ||
| var topBottom = fixedTest.offsetHeight; | ||
| var vh = vhTest.offsetHeight; | ||
| var offset = vh - topBottom; | ||
| // clean | ||
| document.documentElement.removeChild(fixedTest); | ||
@@ -30,10 +34,15 @@ document.documentElement.removeChild(vhTest); | ||
| } | ||
| function updateCssVar(cssVarName, offset) { | ||
| document.documentElement.style.setProperty('--' + cssVarName, offset + 'px'); | ||
| } | ||
| function vhCheck(cssVarName) { | ||
| // configurable CSS var | ||
| cssVarName = typeof cssVarName === 'string' ? cssVarName : 'vh-offset'; | ||
| var offset = testVh(); | ||
| // usefulness check | ||
| if (!offset) return false; | ||
| updateCssVar(cssVarName, offset); | ||
| // Listen for orientation changes | ||
| window.addEventListener( | ||
@@ -40,0 +49,0 @@ 'orientationchange', |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.vhCheck=t()}(this,function(){"use strict";function e(){var e=document.createElement("div");e.style.cssText="position: fixed; top: 0; bottom: 0;",document.documentElement.insertBefore(e,document.documentElement.firstChild);var t=document.createElement("div");t.style.cssText="position: fixed; top: 0; height: 100vh",document.documentElement.insertBefore(t,document.documentElement.firstChild);var n=e.offsetHeight,o=t.offsetHeight-n;return document.documentElement.removeChild(e),document.documentElement.removeChild(t),o}function t(e,t){document.documentElement.style.setProperty("--"+e,t+"px")}return function(n){n="string"==typeof n?n:"vh-offset";var o=e();return!!o&&(t(n,o),window.addEventListener("orientationchange",function(){var o=e();t(n,o)},!1),!0)}}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.vhCheck=t()}(this,function(){"use strict";function n(){var e=document.createElement("div");e.style.cssText="position: fixed; top: 0; bottom: 0;",document.documentElement.insertBefore(e,document.documentElement.firstChild);var t=document.createElement("div");t.style.cssText="position: fixed; top: 0; height: 100vh",document.documentElement.insertBefore(t,document.documentElement.firstChild);var n=e.offsetHeight,o=t.offsetHeight-n;return document.documentElement.removeChild(e),document.documentElement.removeChild(t),o}function o(e,t){document.documentElement.style.setProperty("--"+e,t+"px")}return function(t){t="string"==typeof t?t:"vh-offset";var e=n();return!!e&&(o(t,e),window.addEventListener("orientationchange",function(){var e=n();o(t,e)},!1),!0)}}); |
| { | ||
| "name": "vh-check", | ||
| "version": "1.1.2", | ||
| "version": "1.1.3", | ||
| "description": "iOS vh buggyfill", | ||
| "main": "dist/vh-check.js", | ||
| "scripts": { | ||
| "demo": "npm run build:demo && http-server ./demo", | ||
| "demo": "npm run build:demo && npm run build:demo:html && http-server ./dist-demo", | ||
| "format-code": "prettier --single-quote --trailing-comma es5 src/index.js --write src/index.js", | ||
| "toc": "doctoc README.md --github --notitle", | ||
| "build": "rollup --config", | ||
| "build:demo": "npm run build && browserify ./demo/index.js -o ./demo/browserify-bundle.js", | ||
| "build:demo": "npm run build && npm run build:demo:commonjs && npm run build:demo:esmodule", | ||
| "build:demo:html": "gulp demo", | ||
| "build:demo:commonjs": "browserify ./demo/commonjs-example.js -o ./dist-demo/commonjs-bundle.js", | ||
| "build:demo:esmodule": "parcel build demo/esmodule-example.js --out-dir dist-demo --out-file esmodule-bundle.js --no-source-maps --no-minify", | ||
| "build:github": "npm run build:demo -- && npm run build:demo:html -- --gh-release", | ||
| "prepublishOnly": "npm run toc && npm run build", | ||
| "release": "np" | ||
| "release": "np", | ||
| "release:github": "npm run build:github && node ./release-gh-page.js" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/Hiswe/ios-vh.git" | ||
| "url": "git+https://github.com/Hiswe/vh-check.git" | ||
| }, | ||
| "keywords": [ | ||
| "ios", | ||
| "mobile", | ||
| "css", | ||
@@ -29,16 +35,20 @@ "vh", | ||
| "bugs": { | ||
| "url": "https://github.com/Hiswe/ios-vh/issues" | ||
| "url": "https://github.com/Hiswe/vh-check/issues" | ||
| }, | ||
| "homepage": "https://github.com/Hiswe/ios-vh#readme", | ||
| "homepage": "https://github.com/Hiswe/vh-check#readme", | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "browserify": "^16.1.1", | ||
| "browserify": "^16.2.2", | ||
| "doctoc": "^1.3.1", | ||
| "gh-pages": "^1.2.0", | ||
| "gulp": "^4.0.0", | ||
| "gulp-pug": "^4.0.1", | ||
| "http-server": "^0.11.1", | ||
| "lodash.merge": "^4.6.1", | ||
| "prettier": "1.11.1", | ||
| "rollup": "^0.57.1", | ||
| "rollup-plugin-cleanup": "^2.0.0", | ||
| "rollup-plugin-uglify": "^3.0.0" | ||
| "parcel-bundler": "^1.8.1", | ||
| "prettier": "1.13.5", | ||
| "rollup": "^0.60.4", | ||
| "rollup-plugin-uglify": "^4.0.0", | ||
| "yargs": "^11.0.0" | ||
| } | ||
| } |
102
README.md
@@ -5,6 +5,2 @@ # vh-check | ||
| Safari iOS has a bug about computing the CSS `100vh` value. | ||
| This script will measure the difference and put it in a CSS var. | ||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
@@ -14,18 +10,36 @@ <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
| - [the problem](#the-problem) | ||
| - [why not use viewport-units-buggyfill?](#why-not-use-viewport-units-buggyfill) | ||
| - [Use](#use) | ||
| - [use](#use) | ||
| - [as a global variable](#as-a-global-variable) | ||
| - [as a Javascript module](#as-a-javascript-module) | ||
| - [How is it working](#how-is-it-working) | ||
| - [as a commonJS module](#as-a-commonjs-module) | ||
| - [as a ES module module](#as-a-es-module-module) | ||
| - [how it works](#how-it-works) | ||
| - [configuration](#configuration) | ||
| - [example](#example) | ||
| - [In your javascript](#in-your-javascript) | ||
| - [In your CSS](#in-your-css) | ||
| - [browser support](#browser-support) | ||
| - [In short: only iOS 9.3+](#in-short-only-ios-93) | ||
| - [More details:](#more-details) | ||
| - [in your javascript](#in-your-javascript) | ||
| - [in your CSS](#in-your-css) | ||
| - [about browser support](#about-browser-support) | ||
| - [demo](#demo) | ||
| - [github pages](#github-pages) | ||
| - [local](#local) | ||
| - [related](#related) | ||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
| ## the problem | ||
| Browsers don't always compute the [vh unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh) 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](https://bugs.webkit.org/show_bug.cgi?id=141832) | ||
| - [Chrome android >= 56](https://developers.google.com/web/updates/2016/12/url-bar-resizing) | ||
| 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. | ||
| ## why not use viewport-units-buggyfill? | ||
@@ -41,3 +55,3 @@ | ||
| ## Use | ||
| ## use | ||
@@ -57,3 +71,3 @@ ### as a global variable | ||
| ### as a Javascript module | ||
| ### as a commonJS module | ||
@@ -70,14 +84,25 @@ ``` | ||
| ### How is it working | ||
| ### as a ES module module | ||
| - It will update the __vh-check var__ if needed | ||
| - The CSS var will be updated on orientation change | ||
| - The CSS var __will not__ be updated on scroll event | ||
| ``` | ||
| npm install vh-check | ||
| ``` | ||
| ```js | ||
| import vhCheck from 'vh-check'; | ||
| const isNeeded = vhCheck(); | ||
| ``` | ||
| ### how it works | ||
| - 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 | ||
| ### configuration | ||
| You can pass the CSS var name as a param to `vhCheck()` | ||
| You can pass the CSS var name as a param to `vhCheck()` (default `vh-check`) | ||
| ```js | ||
| vhCheck('ios-gap') | ||
| vhCheck('browser-address-bar') | ||
| ``` | ||
@@ -89,6 +114,6 @@ | ||
| :root { | ||
| --ios-gap: 0px; | ||
| --browser-address-bar: 0px; | ||
| } | ||
| main { | ||
| min-height: calc(100vh - var(--ios-gap)); | ||
| min-height: calc(100vh - var(--browser-address-bar)); | ||
| } | ||
@@ -99,3 +124,3 @@ ``` | ||
| ### In your javascript | ||
| ### in your javascript | ||
@@ -106,3 +131,3 @@ ```js | ||
| ### In your CSS | ||
| ### in your CSS | ||
@@ -115,19 +140,26 @@ ```css | ||
| /* If you need to support browser without CSS var support */ | ||
| min-height: calc(100vh); | ||
| /* buggyFill will work on iOS 9.3+ only */ | ||
| min-height: calc(100vh - var(--vh-offset)); | ||
| height: 100vh; | ||
| /* enable vh fix */ | ||
| height: calc(100vh - var(--vh-offset)); | ||
| } | ||
| ``` | ||
| ## browser support | ||
| ## about browser support | ||
| ### In short: only iOS 9.3+ | ||
| - __vh unit__ – supported since [IE9+](http://caniuse.com/#search=vh) | ||
| - __calc__ – supported since [IE9+](https://caniuse.com/#search=calc) | ||
| - __CSS custom properties__ – supported since [IE Edge](http://caniuse.com/#feat=css-variables) 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 | ||
| ### More details: | ||
| ## demo | ||
| - [**vh** – should be IE9+](http://caniuse.com/#search=vh). Only iOS7+ has that buggy behavior | ||
| - [**CSS Variables** – iOS 9.3+](http://caniuse.com/#feat=css-variables). not IE and not < iOS 9.3. So this buggyfill will work only on the latest version of iOS :S | ||
| ### github pages | ||
| ## demo | ||
| https://hiswe.github.io/vh-check/ | ||
| ### local | ||
| - clone the project | ||
@@ -137,1 +169,5 @@ - `npm install` | ||
| - go to: http://localhost:8080 | ||
| ## related | ||
| - [ios-inner-height](https://www.npmjs.com/package/ios-inner-height) |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
262400
3374.58%- Number of package files
18
200%- Lines of code
347
530.91%- Number of lines in readme file
164
28.13%Worsened metrics
- Dev dependency count
12
50%- Number of low supply chain risk alerts
3
Infinity%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes