diff --git a/.changeset/short-horses-run.md b/.changeset/short-horses-run.md new file mode 100644 index 000000000..c880b8b17 --- /dev/null +++ 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 index 23a5801b1..5409e0281 100644 --- 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 index 7325d1305..ce2c2e9e3 100644 --- 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; + } `;