From 449e589ba0df2a120c4b10dc69097ba3aeab8038 Mon Sep 17 00:00:00 2001 From: Bogdan Diaconu Date: Mon, 17 Feb 2025 14:05:40 +0200 Subject: [PATCH 1/2] fix(overlay-mixin): remove scroll lock on ios and mac --- .../overlays/src/OverlaysManager.js | 18 ----- .../overlays/src/overlayDocumentStyle.js | 9 --- .../test-suites/OverlayMixin.suite.js | 6 +- .../overlays/test/OverlaysManager.test.js | 67 ------------------- 4 files changed, 1 insertion(+), 99 deletions(-) diff --git a/packages/ui/components/overlays/src/OverlaysManager.js b/packages/ui/components/overlays/src/OverlaysManager.js index 610b0aa1f6..8480875e91 100644 --- a/packages/ui/components/overlays/src/OverlaysManager.js +++ b/packages/ui/components/overlays/src/OverlaysManager.js @@ -1,5 +1,3 @@ -import { browserDetection } from '@lion/ui/core.js'; - /** * @typedef {import('lit').CSSResult} CSSResult * @typedef {import('./OverlayController.js').OverlayController} OverlayController @@ -171,17 +169,8 @@ export class OverlaysManager { // eslint-disable-next-line class-methods-use-this requestToPreventScroll() { - const { isIOS, isMacSafari } = browserDetection; // no check as classList will dedupe it anyways document.body.classList.add('overlays-scroll-lock'); - 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('overlays-scroll-lock-ios-fix'); - } - if (isIOS) { - document.documentElement.classList.add('overlays-scroll-lock-ios-fix'); - } } requestToEnableScroll() { @@ -192,14 +181,7 @@ export class OverlaysManager { return; } - const { isIOS, isMacSafari } = browserDetection; document.body.classList.remove('overlays-scroll-lock'); - if (isIOS || isMacSafari) { - document.body.classList.remove('overlays-scroll-lock-ios-fix'); - } - if (isIOS) { - document.documentElement.classList.remove('overlays-scroll-lock-ios-fix'); - } } /** diff --git a/packages/ui/components/overlays/src/overlayDocumentStyle.js b/packages/ui/components/overlays/src/overlayDocumentStyle.js index 5dbd32488f..d056c38682 100644 --- a/packages/ui/components/overlays/src/overlayDocumentStyle.js +++ b/packages/ui/components/overlays/src/overlayDocumentStyle.js @@ -12,13 +12,4 @@ export const overlayDocumentStyle = css` body.overlays-scroll-lock { overflow: hidden; } - - body.overlays-scroll-lock-ios-fix { - position: fixed; - width: 100%; - } - - html.overlays-scroll-lock-ios-fix { - height: 100vh; - } `; diff --git a/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js b/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js index 00a71a252d..4b99e6d29e 100644 --- a/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js +++ b/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js @@ -8,7 +8,6 @@ import { html, } from '@open-wc/testing'; import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js'; -import { browserDetection } from '@lion/ui/core.js'; import { cache } from 'lit/directives/cache.js'; import '@lion/ui/define/lion-dialog.js'; import { LitElement } from 'lit'; @@ -103,10 +102,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) { ) ); - // For now, we skip this test for MacSafari, since the body.overlays-scroll-lock-ios-fix - // class results in a scrollbar when preventsScroll is true. - // However, fully functioning interacive elements (input fields) in the dialog are more important - if (browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) { + if (elWithBigParent._overlayCtrl.preventsScroll) { return; } diff --git a/packages/ui/components/overlays/test/OverlaysManager.test.js b/packages/ui/components/overlays/test/OverlaysManager.test.js index 6573f4277f..98c8521073 100644 --- a/packages/ui/components/overlays/test/OverlaysManager.test.js +++ b/packages/ui/components/overlays/test/OverlaysManager.test.js @@ -1,7 +1,5 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import sinon from 'sinon'; -import { browserDetection } from '@lion/ui/core.js'; import { OverlayController, OverlaysManager } from '@lion/ui/overlays.js'; /** @@ -100,69 +98,4 @@ describe('OverlaysManager', () => { await dialog2.hide(); expect(mngr.shownList).to.deep.equal([]); }); - - describe('Browser/device edge cases', () => { - const isIOSDetectionStub = sinon.stub(browserDetection, 'isIOS'); - const isMacSafariDetectionStub = sinon.stub(browserDetection, 'isMacSafari'); - - function mockIOS() { - isIOSDetectionStub.value(true); - isMacSafariDetectionStub.value(false); - } - - function mockMacSafari() { - // When we are iOS - isIOSDetectionStub.value(false); - isMacSafariDetectionStub.value(true); - } - - afterEach(() => { - // Restore original values - isIOSDetectionStub.restore(); - isMacSafariDetectionStub.restore(); - }); - - describe('When initialized with "preventsScroll: true"', () => { - it('adds class "overlays-scroll-lock-ios-fix" to body and html on iOS', async () => { - mockIOS(); - const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr); - await dialog.show(); - expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix'); - expect(Array.from(document.documentElement.classList)).to.contain( - 'overlays-scroll-lock-ios-fix', - ); - await dialog.hide(); - expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix'); - expect(Array.from(document.documentElement.classList)).to.not.contain( - 'overlays-scroll-lock-ios-fix', - ); - - // When we are not iOS nor MacSafari - isIOSDetectionStub.value(false); - isMacSafariDetectionStub.value(false); - - const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr); - await dialog2.show(); - expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix'); - expect(Array.from(document.documentElement.classList)).to.not.contain( - 'overlays-scroll-lock-ios-fix', - ); - }); - - it('adds class "overlays-scroll-lock-ios-fix" to body on MacSafari', async () => { - mockMacSafari(); - const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr); - await dialog.show(); - expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix'); - expect(Array.from(document.documentElement.classList)).to.not.contain( - 'overlays-scroll-lock-ios-fix', - ); - await dialog.hide(); - expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix'); - expect(Array.from(document.documentElement.classList)).to.not.contain( - 'overlays-scroll-lock-ios-fix', - ); - }); - }); - }); }); From 8c185ecdf09e3398f8f0dc98e3824ceb4e2615f2 Mon Sep 17 00:00:00 2001 From: BogdanDiaconu97 <81958558+BogdanDiaconu97@users.noreply.github.com> Date: Tue, 18 Feb 2025 11:30:28 +0200 Subject: [PATCH 2/2] Create spicy-buckets-allow.md --- .changeset/spicy-buckets-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spicy-buckets-allow.md diff --git a/.changeset/spicy-buckets-allow.md b/.changeset/spicy-buckets-allow.md new file mode 100644 index 0000000000..787d505c9f --- /dev/null +++ b/.changeset/spicy-buckets-allow.md @@ -0,0 +1,5 @@ +--- +"@lion/ui": patch +--- + +fix(overlay-mixin): remove scroll lock on ios and mac