Fix black bars on dialogs with preventsScroll enabled on ios 15 (#1526)

fix(overlays): black bars on dialogs with preventsScroll enabled on ios 15
ing-bank · Nov 11, 2021 · fdc5e73 · fdc5e73
1 parent d449515
commit fdc5e73
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/short-horses-run.md b/.changeset/short-horses-run.md
@@ -0,0 +1,6 @@
+---
+"@lion/overlays": patch
+---
+
+Fix: black bars on dialogs with preventsScroll enabled on ios 15. 
+See https://stackoverflow.com/questions/69589924/ios-15-minimized-address-bar-issue-with-fixed-position-full-screen-content
diff --git a/packages/overlays/src/OverlaysManager.js b/packages/overlays/src/OverlaysManager.js
@@ -205,6 +205,7 @@ export class OverlaysManager {
       // iOS has issues with overlays with input fields. This is fixed by applying
       // position: fixed to the body. As a side effect, this will scroll the body to the top.
       document.body.classList.add('global-overlays-scroll-lock-ios-fix');
+      document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix');
     }
   }
 
@@ -213,6 +214,7 @@ export class OverlaysManager {
       document.body.classList.remove('global-overlays-scroll-lock');
       if (isIOS) {
         document.body.classList.remove('global-overlays-scroll-lock-ios-fix');
+        document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix');
       }
     }
   }

diff --git a/packages/overlays/src/globalOverlaysStyle.js b/packages/overlays/src/globalOverlaysStyle.js
@@ -122,4 +122,8 @@ export const globalOverlaysStyle = css`
     position: fixed;
     width: 100%;
   }
+
+  html.global-overlays-scroll-lock-ios-fix {
+    height: 100vh;
+  }
 `;