Fix height issue on webkit (#49)

Azure · Mar 25, 2021 · 856cc4f · 856cc4f
1 parent 51ba4e4
commit 856cc4f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v8.1.7
+### Changed
+- Fixed app height on webkit based browsers to take all available space instead of 100vh
+
 ## v8.1.7
 ### Changed
 - Updated `$max-size-60` to 46.25rem

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "8.1.7",
+  "version": "8.1.8",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

diff --git a/src/_normalize.scss b/src/_normalize.scss
@@ -15,7 +15,15 @@
 }
 
 :global {
+  :root {
+    // Fix webkit mobile bug with handling 100vh hiding it over the sticky browser footer
+    height: -webkit-fill-available;
+  }
+
   body {
+    height: 100vh;
+    height: -webkit-fill-available;
+
     margin: 0;
     padding: 0;
 
@@ -26,7 +34,8 @@
   }
 
   #root {
-    height: 100vh;
+    height: 100%;
+    height: -webkit-fill-available;
 
     // Set positioning to relative so that everything flows from shell
     position: relative;