chore: adds scale prop

Author: joshuascan

packages/magic-sdk/src/iframe-controller.ts

@@ -8,17 +8,18 @@ import { MagicIncomingWindowMessage, MagicOutgoingWindowMessage } from '@magic-s
 const overlayStyles: Partial<CSSStyleDeclaration> = {
   display: 'block',
   visibility: 'hidden',
-  pointerEvents: 'none',
   position: 'fixed',
   top: '0',
   right: '0',
   width: '100%',
   height: '100%',
   borderRadius: '0',
   border: 'none',
-  zIndex: '-1',
   // necessary for iOS Safari
   opacity: '0',
+  // necessary for iOS 17 and earlier
+  zIndex: '-1',
+  transform: 'scale(0)',
 };
 
 /**
@@ -129,8 +130,8 @@ export class IframeController extends ViewController {
   protected async showOverlay() {
     const iframe = await this.iframe;
     iframe.style.visibility = 'visible';
-    iframe.style.pointerEvents = 'auto';
     iframe.style.zIndex = '2147483647';
+    iframe.style.transform = 'scale(1)';
     iframe.style.opacity = '1';
     this.activeElement = document.activeElement;
     iframe.focus();
@@ -139,8 +140,8 @@ export class IframeController extends ViewController {
   protected async hideOverlay() {
     const iframe = await this.iframe;
     iframe.style.visibility = 'hidden';
-    iframe.style.pointerEvents = 'none';
     iframe.style.zIndex = '-1';
+    iframe.style.transform = 'scale(0)';
     iframe.style.opacity = '0';
     if (this.activeElement?.focus) this.activeElement.focus();
     this.activeElement = null;

packages/magic-sdk/test/spec/iframe-controller/hideOverlay.spec.ts

@@ -22,7 +22,7 @@ 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', pointerEvents: 'none', zIndex: '-1' },
+    style: { visibility: 'hidden', opacity: '0', zIndex: '-1', transform: 'scale(0)' },
   });
 });