Merge pull request #641 from marp-team/safari-bespoke-transition-compatibility

Improve bespoke transition animations for Safari compatibility

Author: yhatt

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - Use arm64 hosted runner to build container image for ARM64 ([#635](https://github.com/marp-team/marp-cli/issues/635), [#637](https://github.com/marp-team/marp-cli/pull/637))
 
+### Fixed
+
+- Improve bespoke transition animations for Safari compatibility ([#572](https://github.com/marp-team/marp-cli/issues/572), [#641](https://github.com/marp-team/marp-cli/pull/641))
+
 ## v4.1.1 - 2025-01-19
 
 ### Fixed

docs/bespoke-transitions/README.md

@@ -20,7 +20,7 @@ To show transition animations, a viewer has to show HTML slide in the browser wh
 
 - **Chrome**: ✅ (111-)
 - **Edge**: ✅ (111-)
-- **Safari**: ✅ (18.2- / [#572](https://github.com/marp-team/marp-cli/issues/572))
+- **Safari**: ✅ (18.2-)
 - **Firefox**: :x:
 
 ## `transition` local directive
@@ -231,7 +231,8 @@ Marp CLI has provided useful [33 built-in transitions](../../src/engine/transiti
   </tbody>
 </table>
 
-> **Note**
+> [!NOTE]
+>
 > If the viewer has enabled the reduce motion feature on their device, the transition animation will be forced to a simple `fade` animation regardless of the specified transition. See also "[Reduce transitions by a viewer](#reduce-transitions-by-a-viewer)".
 
 ### Duration
@@ -252,6 +253,8 @@ For making custom transitions, all you have to know is only about CSS. Define an
 
 Marp prefers the custom transition if defined the transition with same name as built-in transitions.
 
+> [!TIP]
+>
 > See also our blog article: **"[Marp CLI: How to make custom transition](https://marp.app/blog/how-to-make-custom-transition)"**
 
 ### Simple keyframe declaration
@@ -487,7 +490,7 @@ If you want to swap the order of layers during animation, try to animate `z-inde
 }
 ```
 
-> `z-index` is always taking an integer value, and interpolated `z-index` value by animation does not take any decimal points too.
+`z-index` is always taking an integer value, and interpolated `z-index` value by animation does not take any decimal points too.
 
 ## Morphing animations
 
@@ -505,7 +508,11 @@ The slide author can visualize the relationship between the different elements i
 
 If there were multiple pairs defined by `view-transition-name` CSS property with different names, each elements will morph at the same time. Elements that were not marked by `view-transition-name` still follow the selected animation by `transition` local directive.
 
-> **Warning** Each morphable elements marked by `view-transition-name` must have uniquely named in a slide page. If there were multiple elements named by `view-transition-name` with the same name in a single page, View Transition API does not apply _the whole of transition animation_.
+> [!WARNING]
+>
+> Each morphable elements marked by `view-transition-name` must have uniquely named in a slide page. If there were multiple elements named by `view-transition-name` with the same name in a single page, View Transition API does not apply _the whole of transition animation_.
+>
+> The morphing animation has been confirmed working correctly on Chrome and Edge. Safari also supports this kind of animation, but the correct animation is not granted, due to the effect of [WebKit's a long-standing bug](https://bugs.webkit.org/show_bug.cgi?id=23113) (and [marpit-svg-polyfill](https://github.com/marp-team/marpit-svg-polyfill) to patch that).
 
 ### Example
 

docs/bespoke-transitions/images/flip.gif

@@ -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 {

docs/bespoke-transitions/images/rotate.gif

@@ -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/cover.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/drop.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/flip.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/pivot.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/pull.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/push.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/reveal.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/rotate.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/slide.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/swap.scss

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