fix: replace visibility w/ display +

transition-behavior: allow-discrete;
luwes · Dec 2, 2024 · 59b00da · 59b00da
1 parent 39d7d53
commit 59b00da
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/js/media-chrome-dialog.ts b/src/js/media-chrome-dialog.ts
@@ -32,17 +32,17 @@ function getTemplateHTML(_attrs: Record<string, string>) {
         height: 100%;
         justify-content: center;
         align-items: center;
-        transition: visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in;
-        visibility: hidden;
+        transition: display .15s, opacity .15s ease-in, transform .15s ease-in;
+        transition-behavior: allow-discrete;
         opacity: 0;
         transform: translateY(2px) scale(.99);
         pointer-events: none;
       }
 
       :host([open]) {
-        visibility: visible;
+        transition: display .2s, opacity .2s ease-out, transform .15s ease-out;
+        transition-behavior: allow-discrete;
         opacity: 1;
-        transition: visibility 0s, opacity .2s ease-out, transform .15s ease-out;
         transform: translateY(0) scale(1);
       }