ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
fix(overlays): black bars on dialogs with preventsScroll enabled on ios 15
This commit is contained in:
Joel-Levi 2021-11-11 13:13:57 +01:00 committed by GitHub
parent d449515960
commit fdc5e73fd2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/short-horses-run.md Normal file
View file

@ -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

2
packages/overlays/src/OverlaysManager.js
View file

@ -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');
}
}
}

4
packages/overlays/src/globalOverlaysStyle.js
View file

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