From 53459451a7e28d1b72ad88cb0cac8f61b3ea8e02 Mon Sep 17 00:00:00 2001 From: Rick de Hoop Date: Fri, 18 Nov 2022 16:20:55 +0100 Subject: [PATCH] fix(overlays): MacSafari fix for interactive content in dialog with preventsScroll --- .changeset/twenty-tomatoes-wash.md | 5 +++++ .../components/overlays/src/OverlaysManager.js | 17 ++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 .changeset/twenty-tomatoes-wash.md diff --git a/.changeset/twenty-tomatoes-wash.md b/.changeset/twenty-tomatoes-wash.md new file mode 100644 index 000000000..057916584 --- /dev/null +++ b/.changeset/twenty-tomatoes-wash.md @@ -0,0 +1,5 @@ +--- +'@lion/overlays': patch +--- + +scroll issues on mac safari fixed when dialog are openend diff --git a/packages/ui/components/overlays/src/OverlaysManager.js b/packages/ui/components/overlays/src/OverlaysManager.js index 7d9917c28..42d9fc6f3 100644 --- a/packages/ui/components/overlays/src/OverlaysManager.js +++ b/packages/ui/components/overlays/src/OverlaysManager.js @@ -7,6 +7,13 @@ import { globalOverlaysStyle } from './globalOverlaysStyle.js'; import { setSiblingsInert, unsetSiblingsInert } from './utils/inert-siblings.js'; 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 @@ -201,10 +208,12 @@ export class OverlaysManager { requestToPreventScroll() { // no check as classList will dedupe it anyways document.body.classList.add('global-overlays-scroll-lock'); - if (isIOS) { - // iOS has issues with overlays with input fields. This is fixed by applying + if (isIOS || isMacSafari) { + // 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. document.body.classList.add('global-overlays-scroll-lock-ios-fix'); + } + if (isIOS) { document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix'); } } @@ -212,8 +221,10 @@ export class OverlaysManager { requestToEnableScroll() { if (!this.shownList.some(ctrl => ctrl.preventsScroll === true)) { document.body.classList.remove('global-overlays-scroll-lock'); - if (isIOS) { + if (isIOS || isMacSafari) { document.body.classList.remove('global-overlays-scroll-lock-ios-fix'); + } + if (isIOS) { document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix'); } }