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

fix(overlays): MacSafari fix for interactive content in dialog with preventsScroll

Browse source
This commit is contained in:
Rick de Hoop 2022-11-18 16:20:55 +01:00 committed by Thijs Louisse
parent e090d2d861
commit 53459451a7
2 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/twenty-tomatoes-wash.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/overlays': patch
---
scroll issues on mac safari fixed when dialog are openend

17
packages/ui/components/overlays/src/OverlaysManager.js
View file

@ -7,6 +7,13 @@ import { globalOverlaysStyle } from './globalOverlaysStyle.js';
import { setSiblingsInert, unsetSiblingsInert } from './utils/inert-siblings.js'; import { setSiblingsInert, unsetSiblingsInert } from './utils/inert-siblings.js';
const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i); const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i);
const isMacSafari =
navigator.vendor &&
navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') === -1 &&
navigator.userAgent.indexOf('FxiOS') === -1 &&
navigator.appVersion.indexOf('Mac') !== -1;
/** /**
* `OverlaysManager` which manages overlays which are rendered into the body * `OverlaysManager` which manages overlays which are rendered into the body
@ -201,10 +208,12 @@ export class OverlaysManager {
requestToPreventScroll() { requestToPreventScroll() {
// no check as classList will dedupe it anyways // no check as classList will dedupe it anyways
document.body.classList.add('global-overlays-scroll-lock'); document.body.classList.add('global-overlays-scroll-lock');
if (isIOS) { if (isIOS || isMacSafari) {
// iOS has issues with overlays with input fields. This is fixed by applying // iOS and safar for mac have 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. // 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.body.classList.add('global-overlays-scroll-lock-ios-fix');
}
if (isIOS) {
document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix'); document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix');
} }
} }
@ -212,8 +221,10 @@ export class OverlaysManager {
requestToEnableScroll() { requestToEnableScroll() {
if (!this.shownList.some(ctrl => ctrl.preventsScroll === true)) { if (!this.shownList.some(ctrl => ctrl.preventsScroll === true)) {
document.body.classList.remove('global-overlays-scroll-lock'); document.body.classList.remove('global-overlays-scroll-lock');
if (isIOS) { if (isIOS || isMacSafari) {
document.body.classList.remove('global-overlays-scroll-lock-ios-fix'); document.body.classList.remove('global-overlays-scroll-lock-ios-fix');
}
if (isIOS) {
document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix'); document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix');
} }
} }