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

2 files changed, 7 insertions, 24 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"] {
diff --git a/packages/console/app/src/routes/black/index.tsx b/packages/console/app/src/routes/black/index.tsx
index af533f879..5ea5c3e92 100644
--- a/packages/console/app/src/routes/black/index.tsx
+++ b/packages/console/app/src/routes/black/index.tsx
@@ -49,10 +49,10 @@ export default function Black() {
                     data-slot="pricing-card"
                     style={{ "view-transition-name": `card-${plan.id}` }}
                   >
-                    <div data-slot="icon" style={{ "view-transition-name": `icon-${plan.id}` }}>
+                    <div data-slot="icon">
                       <PlanIcon plan={plan.id} />
                     </div>
-                    <p data-slot="price" style={{ "view-transition-name": `price-${plan.id}` }}>
+                    <p data-slot="price">
                       <span data-slot="amount">${plan.id}</span> <span data-slot="period">per month</span>
                       <Show when={plan.multiplier}>
                         <span data-slot="multiplier">{plan.multiplier}</span>
@@ -67,10 +67,10 @@ export default function Black() {
             {(plan) => (
               <div data-slot="selected-plan">
                 <div data-slot="selected-card" style={{ "view-transition-name": `card-${plan().id}` }}>
-                  <div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}>
+                  <div data-slot="icon">
                     <PlanIcon plan={plan().id} />
                   </div>
-                  <p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}>
+                  <p data-slot="price">
                     <span data-slot="amount">${plan().id}</span>{" "}
                     <span data-slot="period">per person billed monthly</span>
                     <Show when={plan().multiplier}>