Improve bespoke transition animations for Safari compatibility

src/engine/transition/keyframes/cover.scss

@@ -6,11 +6,16 @@
     transform: translateX(10%);
     animation-timing-function: ease-out;
   }
+
+  to {
+    transform: translateX(0%);
+  }
 }
 
 @keyframes marp-outgoing-transition-backward-__builtin__cover {
   from {
     animation-timing-function: ease-out;
+    transform: translateX(0%);
   }
 
   to {

src/engine/transition/keyframes/drop.scss

@@ -3,6 +3,14 @@
     rgba(0, 0, 0, 30%) 0 3vh 5vh, rgba(0, 0, 0, 22%) 0 2vh 1.5vh;
 }
 
+// [Safari CSS hack]
+// In Safari, applying shadow causes a rendering issue
+_::-webkit-full-page-media,
+_:future,
+:root {
+  --bespoke-marp-transition-drop-shadow: none;
+}
+
 @keyframes marp-incoming-transition-__builtin__drop {
   0% {
     transform: translateY(-100%);
@@ -55,6 +63,7 @@
 @keyframes marp-outgoing-transition-backward-__builtin__drop {
   0% {
     z-index: 1;
+    transform: translateY(0);
     animation-timing-function: ease-in;
     box-shadow: var(--bespoke-marp-transition-drop-shadow);
   }

src/engine/transition/keyframes/flip.scss

@@ -4,9 +4,9 @@
   }
 
   50% {
-    transform: perspective(800px) translateZ(-400px)
+    transform: perspective(75vw)
       rotateY(calc(var(--marp-transition-direction, 1) * -90deg));
-    opacity: 0.5;
+    opacity: 0.75;
     animation-timing-function: step-start;
   }
 
@@ -22,9 +22,9 @@
   }
 
   50% {
-    transform: perspective(800px) translateZ(-400px)
+    transform: perspective(75vw)
       rotateY(calc(var(--marp-transition-direction, 1) * 90deg));
-    opacity: 0.5;
+    opacity: 0.75;
     animation-timing-function: ease-out;
   }
 }

src/engine/transition/keyframes/pivot.scss

@@ -19,6 +19,7 @@
 @keyframes marp-outgoing-transition-backward-__builtin__pivot {
   from {
     transform-origin: left top;
+    transform: rotate(0deg);
     animation-timing-function: ease-in;
   }
 

src/engine/transition/keyframes/pull.scss

@@ -3,6 +3,7 @@
 @keyframes marp-outgoing-transition-__builtin__pull {
   from {
     animation-timing-function: ease-out;
+    transform: translateX(0);
   }
 
   to {
@@ -19,6 +20,10 @@
     animation-timing-function: ease-out;
     transform: translateX(-100%);
   }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes marp-outgoing-transition-backward-__builtin__pull {

src/engine/transition/keyframes/push.scss

@@ -5,11 +5,16 @@
     animation-timing-function: ease-out;
     transform: translateX(100%);
   }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes marp-outgoing-transition-backward-__builtin__push {
   from {
     animation-timing-function: ease-out;
+    transform: translateX(0);
   }
 
   to {

src/engine/transition/keyframes/reveal.scss

@@ -3,6 +3,7 @@
 @keyframes marp-outgoing-transition-__builtin__reveal {
   from {
     animation-timing-function: ease-out;
+    transform: translateX(0%);
   }
 
   to {
@@ -24,4 +25,8 @@
     transform: translateX(-10%);
     animation-timing-function: ease-out;
   }
+
+  to {
+    transform: translateX(0%);
+  }
 }

src/engine/transition/keyframes/rotate.scss

@@ -1,16 +1,18 @@
 @keyframes marp-outgoing-transition-__builtin__rotate {
   from {
     z-index: 1;
-    transform: perspective(100vw) translateZ(-40vw) rotateY(0deg)
-      translateZ(40vw);
+
+    // NOTE: 0.0001deg is a workaround for a bug in Safari
+    transform: perspective(100vw) translateZ(-50vw) rotateY(0.0001deg)
+      translateZ(50vw);
     animation-timing-function: ease-in-out;
   }
 
   to {
     z-index: 0;
-    transform: perspective(100vw) translateZ(-40vw)
+    transform: perspective(100vw) translateZ(-50vw)
       rotateY(calc(var(--marp-transition-direction, 1) * -180deg))
-      translateZ(40vw)
+      translateZ(50vw)
       rotateY(calc(var(--marp-transition-direction, 1) * 180deg));
     opacity: 0;
   }
@@ -20,16 +22,16 @@
   from {
     opacity: 0;
     z-index: 0;
-    transform: perspective(100vw) translateZ(-40vw)
+    transform: perspective(100vw) translateZ(-50vw)
       rotateY(calc(var(--marp-transition-direction, 1) * 180deg))
-      translateZ(40vw)
+      translateZ(50vw)
       rotateY(calc(var(--marp-transition-direction, 1) * -180deg));
     animation-timing-function: ease-in-out;
   }
 
   to {
     z-index: 1;
-    transform: perspective(100vw) translateZ(-40vw) rotateY(0deg)
-      translateZ(40vw);
+    transform: perspective(100vw) translateZ(-50vw) rotateY(0.0001deg)
+      translateZ(50vw);
   }
 }

src/engine/transition/keyframes/slide.scss

@@ -3,19 +3,15 @@
     transform: translateX(calc(var(--marp-transition-direction, 1) * 100vw));
     animation-timing-function: ease-in-out;
   }
-
-  to {
-    animation-timing-function: ease-in-out;
-  }
 }
 
 @keyframes marp-outgoing-transition-__builtin__slide {
   from {
+    transform: translateX(0);
     animation-timing-function: ease-in-out;
   }
 
   to {
     transform: translateX(calc(var(--marp-transition-direction, 1) * -100vw));
-    animation-timing-function: ease-in-out;
   }
 }

src/engine/transition/keyframes/swap.scss

@@ -1,6 +1,7 @@
 @keyframes marp-outgoing-transition-__builtin__swap {
   0% {
     z-index: 1;
+    transform: none;
     transform-origin: calc(var(--marp-transition-direction, 1) * 50% + 50%)
       calc(var(--marp-transition-direction, 1) * 50% + 50%);
     animation-timing-function: ease-in-out;
@@ -13,6 +14,7 @@
   }
 
   100% {
+    transform: none;
     transform-origin: calc(var(--marp-transition-direction, 1) * 50% + 50%)
       calc(var(--marp-transition-direction, 1) * 50% + 50%);
     filter: brightness(0.5);
@@ -23,6 +25,7 @@
 @keyframes marp-incoming-transition-__builtin__swap {
   0% {
     filter: brightness(0.75);
+    transform: none;
     transform-origin: calc(var(--marp-transition-direction, 1) * -50% + 50%)
       calc(var(--marp-transition-direction, 1) * -50% + 50%);
     animation-timing-function: ease-in-out;
@@ -35,6 +38,7 @@
   }
 
   100% {
+    transform: none;
     transform-origin: calc(var(--marp-transition-direction, 1) * -50% + 50%)
       calc(var(--marp-transition-direction, 1) * -50% + 50%);
   }

src/engine/transition/keyframes/swipe.scss

@@ -1,13 +1,26 @@
+:root {
+  --bespoke-marp-transition-swipe-shadow: 6px 6px 10px 6px rgba(0, 0, 0, 25%);
+}
+
+// [Safari CSS hack]
+// In Safari, applying shadow causes a rendering issue
+_::-webkit-full-page-media,
+_:future,
+:root {
+  --bespoke-marp-transition-swipe-shadow: none;
+}
+
 @keyframes marp-outgoing-transition-__builtin__swipe {
   0% {
     animation-timing-function: ease-in;
-    box-shadow: 6px 6px 10px 6px rgba(0, 0, 0, 25%);
+    box-shadow: var(--bespoke-marp-transition-swipe-shadow);
+    transform: none;
     transform-origin: 100% 100%;
     z-index: 1;
   }
 
   100% {
-    box-shadow: 6px 6px 10px 6px rgba(0, 0, 0, 25%);
+    box-shadow: var(--bespoke-marp-transition-swipe-shadow);
     transform: translate(calc(-100vw - 30px), -30vh) rotate(-30deg);
     transform-origin: 100% 100%;
     z-index: 1;
@@ -29,6 +42,7 @@
 
 @keyframes marp-outgoing-transition-backward-__builtin__swipe {
   0% {
+    transform: none;
     animation-timing-function: ease-in-out;
   }
 
@@ -41,14 +55,15 @@
 @keyframes marp-incoming-transition-backward-__builtin__swipe {
   0% {
     animation-timing-function: ease-out;
-    box-shadow: 6px 6px 10px 6px rgba(0, 0, 0, 25%);
+    box-shadow: var(--bespoke-marp-transition-swipe-shadow);
     transform: translate(calc(-100vw - 30px), 30vh) rotate(30deg);
     transform-origin: 100% 0%;
     z-index: 1;
   }
 
   100% {
-    box-shadow: 6px 6px 10px 6px rgba(0, 0, 0, 25%);
+    box-shadow: var(--bespoke-marp-transition-swipe-shadow);
+    transform: none;
     transform-origin: 100% 0%;
     z-index: 1;
   }

src/engine/transition/keyframes/zoom.scss

@@ -14,6 +14,7 @@
 
 @keyframes marp-outgoing-transition-backward-__builtin__zoom {
   from {
+    transform: none;
     animation-timing-function: ease-in;
   }