resolves #55 make vh unit adjustable using --vh property (PR #56)

Author: mojavelinux

gulp.d/tasks/build.js

@@ -53,7 +53,7 @@ module.exports = (src, dest, preview) => () => {
       },
     ]),
     // NOTE importFrom is for supplemental CSS files
-    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
+    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: true }),
     preview ? postcssCalc : () => {},
     autoprefixer,
     preview

src/css/base.css

@@ -1,8 +1,3 @@
-html,
-body {
-  height: 100%;
-}
-
 *,
 *::before,
 *::after {
@@ -12,6 +7,8 @@ body {
 html {
   box-sizing: border-box;
   font-size: var(--body-font-size);
+  height: var(--viewport-height);
+  min-height: 100vh; /* used as a reference to detect invalid vh unit */
 }
 
 @media screen and (min-width: 1024px) {

src/css/header.css

@@ -2,6 +2,14 @@ html.is-clipped--navbar {
   overflow-y: hidden;
 }
 
+/* NOTE workaround bug in Firefox mobile, which clips the html element to the original viewport height */
+@supports (scrollbar-width: none) {
+  html.is-clipped--navbar {
+    overflow-y: initial;
+    scrollbar-width: none;
+  }
+}
+
 body {
   padding-top: var(--navbar-height);
 }
@@ -251,7 +259,7 @@ body {
   .navbar-menu.is-active {
     display: block;
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: calc(100vh - var(--navbar-height));
+    max-height: calc(var(--viewport-height) - var(--navbar-height));
     overflow-y: auto;
   }
 

src/css/nav.css

@@ -1,3 +1,17 @@
+@media screen and (max-width: 769.5px) {
+  html.is-clipped--nav {
+    overflow-y: hidden;
+  }
+
+  /* NOTE workaround bug in Firefox mobile, which clips the html element to the original viewport height */
+  @supports (scrollbar-width: none) {
+    html.is-clipped--nav {
+      overflow-y: initial;
+      scrollbar-width: none;
+    }
+  }
+}
+
 .nav-container {
   position: fixed;
   top: var(--navbar-height);
@@ -56,10 +70,6 @@
   height: inherit;
 }
 
-html.is-clipped--nav {
-  overflow-y: hidden;
-}
-
 .nav-panel-menu {
   overflow-y: scroll;
   display: flex;

src/css/vars.css

@@ -18,8 +18,10 @@
   --color-jet-70: #222;
   --color-jet-80: #191919;
   --color-black: #000;
-  /* fonts */
+  /* utils */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
+  --viewport-height: calc(100 * var(--vh, 1vh)); /* used to represent a tunable value of 100vh */
+  /* fonts */
   --body-font-size: 1.0625em; /* 17px */
   --body-font-size--desktop: 1.125em; /* 18px */
   --body-font-size--print: 0.9375em; /* 15px */
@@ -126,14 +128,14 @@
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
-  --body-min-height: calc(100vh - var(--body-top));
+  --body-min-height: calc(var(--viewport-height) - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);
   --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
   --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
-  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
+  --toc-height: calc(var(--viewport-height) - var(--toc-top) - 2.5rem);
   --toc-width: calc(162 / var(--rem-base) * 1rem);
   --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);

src/css/vendor/docsearch.css

@@ -1,7 +1,7 @@
 @import "docsearch.js/dist/cdn/docsearch.css";
 
 .algolia-autocomplete .ds-dropdown-menu > :first-child {
-  max-height: calc(100vh - var(--navbar-height));
+  max-height: calc(var(--viewport-height) - var(--navbar-height));
 }
 
 .algolia-autocomplete .algolia-docsearch-suggestion--title {

src/js/01-nav.js

@@ -107,12 +107,16 @@
     if (navToggle.classList.contains('is-active')) return hideNav(e)
     trapEvent(e)
     var html = document.documentElement
+    if (/mobi/i.test(window.navigator.userAgent)) {
+      if (Math.round(parseFloat(window.getComputedStyle(html).minHeight)) !== window.innerHeight) {
+        html.style.setProperty('--vh', window.innerHeight / 100 + 'px')
+      } else {
+        html.style.removeProperty('--vh')
+      }
+    }
     html.classList.add('is-clipped--nav')
     navToggle.classList.add('is-active')
     navContainer.classList.add('is-active')
-    var bounds = nav.getBoundingClientRect()
-    var expectedHeight = window.innerHeight - Math.round(bounds.top)
-    if (Math.round(bounds.height) !== expectedHeight) nav.style.height = expectedHeight + 'px'
     html.addEventListener('click', hideNav)
   }
 

src/js/05-mobile-navbar.js

@@ -7,14 +7,17 @@
 
   function toggleNavbarMenu (e) {
     e.stopPropagation() // trap event
-    document.documentElement.classList.toggle('is-clipped--navbar')
-    this.classList.toggle('is-active')
+    var html = document.documentElement
     var menu = document.getElementById(this.dataset.target)
-    if (menu.classList.toggle('is-active')) {
-      menu.style.maxHeight = ''
-      var expectedMaxHeight = window.innerHeight - Math.round(menu.getBoundingClientRect().top)
-      var actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight, 10)
-      if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
+    if (!menu.classList.contains('is-active') && /mobi/i.test(window.navigator.userAgent)) {
+      if (Math.round(parseFloat(window.getComputedStyle(html).minHeight)) !== window.innerHeight) {
+        html.style.setProperty('--vh', window.innerHeight / 100 + 'px')
+      } else {
+        html.style.removeProperty('--vh')
+      }
     }
+    html.classList.toggle('is-clipped--navbar')
+    this.classList.toggle('is-active')
+    menu.classList.toggle('is-active')
   }
 })()