fix(overlay-mixin): remove scroll lock on ios and mac

.changeset/spicy-buckets-allow.md

@@ -0,0 +1,5 @@
+---
+"@lion/ui": patch
+---
+
+fix(overlay-mixin): remove scroll lock on ios and mac

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

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;
-  }
 `;

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;
       }
 

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