Merge pull request #772 from magiclabs/hcote-visibility-update

change display css to visibility
magiclabs · Aug 9, 2024 · a573e0d · a573e0d
2 parents 8f347f7 + b219f3d
commit a573e0d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 60 deletions.
diff --git a/packages/magic-sdk/src/iframe-controller.ts b/packages/magic-sdk/src/iframe-controller.ts
@@ -8,7 +8,8 @@ import { ViewController, createDuplicateIframeWarning, createURL, createModalNot
  * to render above all other DOM content.
  */
 const overlayStyles: Partial<CSSStyleDeclaration> = {
-  display: 'none',
+  display: 'block',
+  visibility: 'hidden',
   position: 'fixed',
   top: '0',
   right: '0',
@@ -98,14 +99,14 @@ export class IframeController extends ViewController {
 
   protected async showOverlay() {
     const iframe = await this.iframe;
-    iframe.style.display = 'block';
+    iframe.style.visibility = 'visible';
     this.activeElement = document.activeElement;
     iframe.focus();
   }
 
   protected async hideOverlay() {
     const iframe = await this.iframe;
-    iframe.style.display = 'none';
+    iframe.style.visibility = 'hidden';
     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
@@ -10,10 +10,10 @@ beforeEach(() => {
   browserEnv.stub('console.log', jest.fn());
 });
 
-test('Change display style to `none`', async () => {
+test('Change visibility style to `hidden`', async () => {
   (IframeController.prototype as any).init = function () {
     this.iframe = {
-      style: { display: 'block' },
+      style: { visibility: 'hidden' },
     };
 
     return Promise.resolve();
@@ -23,13 +23,13 @@ test('Change display style to `none`', async () => {
 
   await (overlay as any).hideOverlay();
 
-  expect((overlay as any).iframe).toEqual({ style: { display: 'none' } });
+  expect((overlay as any).iframe).toEqual({ style: { visibility: 'hidden' } });
 });
 
 test('If `activeElement` exists and can be focused, calls `activeElement.focus()`', async () => {
   (IframeController.prototype as any).init = function () {
     this.iframe = {
-      style: { display: 'block' },
+      style: { visibility: 'visible' },
     };
 
     return Promise.resolve();

diff --git a/packages/magic-sdk/test/spec/iframe-controller/init.spec.ts b/packages/magic-sdk/test/spec/iframe-controller/init.spec.ts
@@ -15,7 +15,7 @@ function createOverlayElementsStub() {
         src: null,
         classList: { add: classListAddStub },
         dataset: {},
-        style: { display: 'none' },
+        style: { visibility: 'hidden' },
       };
     }
 

diff --git a/packages/magic-sdk/test/spec/iframe-controller/showOverlay.spec.ts b/packages/magic-sdk/test/spec/iframe-controller/showOverlay.spec.ts
@@ -13,7 +13,7 @@ beforeEach(() => {
 test('Change display style to `block`', async () => {
   (IframeController.prototype as any).init = function () {
     this.iframe = {
-      style: { display: 'none' },
+      style: { visibility: 'hidden' },
       focus: () => {},
     };
 
@@ -24,7 +24,7 @@ test('Change display style to `block`', async () => {
 
   await (overlay as any).showOverlay();
 
-  expect((overlay as any).iframe.style.display).toBe('block');
+  expect((overlay as any).iframe.style.visibility).toBe('visible');
 });
 
 test('Calls `iframe.focus()`', async () => {