feat(console): Fix /black page View Transition Safari issue (#8755)

1 files changed, 3 insertions, 20 deletions

diff --git a/packages/console/app/src/routes/black.css b/packages/console/app/src/routes/black.css
index d74f4118f..66bffea59 100644
--- a/packages/console/app/src/routes/black.css
+++ b/packages/console/app/src/routes/black.css
@@ -98,7 +98,7 @@
 ::view-transition-new(actions-20),
 ::view-transition-new(actions-100),
 ::view-transition-new(actions-200) {
-  animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
+  animation: fade-in-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
   opacity: 0;
 }
 
@@ -109,25 +109,6 @@
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-::view-transition-image-pair(card-20),
-::view-transition-image-pair(card-100),
-::view-transition-image-pair(card-200) {
-  isolation: isolate;
-  overflow: hidden;
-}
-
-::view-transition-old(card-20),
-::view-transition-old(card-100),
-::view-transition-old(card-200) {
-  mix-blend-mode: normal;
-}
-
-::view-transition-new(card-20),
-::view-transition-new(card-100),
-::view-transition-new(card-200) {
-  mix-blend-mode: normal;
-}
-
 [data-page="black"] {
   background: #000;
   min-height: 100vh;
@@ -600,6 +581,8 @@
 
       [data-slot="icon"] {
         color: rgba(255, 255, 255, 0.59);
+        isolation: isolate;
+        transform: translateZ(0);
       }
 
       [data-slot="price"] {