Merge pull request #851 from magiclabs/PDEEXP-2252-unable-to-scroll-o…

…n-i-os-safari fix: unable to scroll on ios safari
magiclabs · Feb 3, 2025 · 3db0b8a · 3db0b8a
2 parents 5b1b58e + 8faa165
commit 3db0b8a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/magic-sdk/src/iframe-controller.ts b/packages/magic-sdk/src/iframe-controller.ts
@@ -15,9 +15,10 @@ const overlayStyles: Partial<CSSStyleDeclaration> = {
   height: '100%',
   borderRadius: '0',
   border: 'none',
-  zIndex: '2147483647',
   // necessary for iOS Safari
   opacity: '0',
+  // necessary for iOS 17 and earlier
+  zIndex: '-1',
 };
 
 /**
@@ -128,6 +129,7 @@ export class IframeController extends ViewController {
   protected async showOverlay() {
     const iframe = await this.iframe;
     iframe.style.visibility = 'visible';
+    iframe.style.zIndex = '2147483647';
     iframe.style.opacity = '1';
     this.activeElement = document.activeElement;
     iframe.focus();
@@ -136,6 +138,7 @@ export class IframeController extends ViewController {
   protected async hideOverlay() {
     const iframe = await this.iframe;
     iframe.style.visibility = 'hidden';
+    iframe.style.zIndex = '-1';
     iframe.style.opacity = '0';
     if (this.activeElement?.focus) this.activeElement.focus();
     this.activeElement = null;

diff --git a/packages/magic-sdk/test/spec/iframe-controller/hideOverlay.spec.ts b/packages/magic-sdk/test/spec/iframe-controller/hideOverlay.spec.ts
@@ -21,7 +21,9 @@ test('Change visibility style to `hidden` and opacity to 0', async () => {
 
   await (overlay as any).hideOverlay();
 
-  expect((overlay as any).iframe).toEqual({ style: { visibility: 'hidden', opacity: '0' } });
+  expect((overlay as any).iframe).toEqual({
+    style: { visibility: 'hidden', opacity: '0', zIndex: '-1' },
+  });
 });
 
 test('If `activeElement` exists and can be focused, calls `activeElement.focus()`', async () => {