From 7d5b8e3ade8d0caa6424fe7d2d17af5648d63a0e Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Sat, 25 Jan 2025 02:18:32 +0900 Subject: [PATCH] Improve bespoke transition animations for Safari compatibility --- src/engine/transition/keyframes/cover.scss | 5 +++++ src/engine/transition/keyframes/drop.scss | 9 ++++++++ src/engine/transition/keyframes/flip.scss | 8 +++---- src/engine/transition/keyframes/pivot.scss | 1 + src/engine/transition/keyframes/pull.scss | 5 +++++ src/engine/transition/keyframes/push.scss | 5 +++++ src/engine/transition/keyframes/reveal.scss | 5 +++++ src/engine/transition/keyframes/rotate.scss | 18 +++++++++------- src/engine/transition/keyframes/slide.scss | 6 +----- src/engine/transition/keyframes/swap.scss | 4 ++++ src/engine/transition/keyframes/swipe.scss | 23 +++++++++++++++++---- src/engine/transition/keyframes/zoom.scss | 1 + 12 files changed, 69 insertions(+), 21 deletions(-) diff --git a/src/engine/transition/keyframes/cover.scss b/src/engine/transition/keyframes/cover.scss index 6a0b6f6d..b5be42fc 100644 --- a/src/engine/transition/keyframes/cover.scss +++ b/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 { diff --git a/src/engine/transition/keyframes/drop.scss b/src/engine/transition/keyframes/drop.scss index ae032ac3..8e899289 100644 --- a/src/engine/transition/keyframes/drop.scss +++ b/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); } diff --git a/src/engine/transition/keyframes/flip.scss b/src/engine/transition/keyframes/flip.scss index cef70104..830aad1c 100644 --- a/src/engine/transition/keyframes/flip.scss +++ b/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; } } diff --git a/src/engine/transition/keyframes/pivot.scss b/src/engine/transition/keyframes/pivot.scss index 0bf8848b..87d78663 100644 --- a/src/engine/transition/keyframes/pivot.scss +++ b/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; } diff --git a/src/engine/transition/keyframes/pull.scss b/src/engine/transition/keyframes/pull.scss index 48daf2f5..8f65128c 100644 --- a/src/engine/transition/keyframes/pull.scss +++ b/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 { diff --git a/src/engine/transition/keyframes/push.scss b/src/engine/transition/keyframes/push.scss index c988131e..461984eb 100644 --- a/src/engine/transition/keyframes/push.scss +++ b/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 { diff --git a/src/engine/transition/keyframes/reveal.scss b/src/engine/transition/keyframes/reveal.scss index 3ec67fb5..24b11346 100644 --- a/src/engine/transition/keyframes/reveal.scss +++ b/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%); + } } diff --git a/src/engine/transition/keyframes/rotate.scss b/src/engine/transition/keyframes/rotate.scss index a020f630..2aa51c12 100644 --- a/src/engine/transition/keyframes/rotate.scss +++ b/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); } } diff --git a/src/engine/transition/keyframes/slide.scss b/src/engine/transition/keyframes/slide.scss index c2f6a50d..234f6b09 100644 --- a/src/engine/transition/keyframes/slide.scss +++ b/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; } } diff --git a/src/engine/transition/keyframes/swap.scss b/src/engine/transition/keyframes/swap.scss index fa20eaf7..0f6b50dc 100644 --- a/src/engine/transition/keyframes/swap.scss +++ b/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%); } diff --git a/src/engine/transition/keyframes/swipe.scss b/src/engine/transition/keyframes/swipe.scss index 04ada39a..0ca6e650 100644 --- a/src/engine/transition/keyframes/swipe.scss +++ b/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; } diff --git a/src/engine/transition/keyframes/zoom.scss b/src/engine/transition/keyframes/zoom.scss index dbfb5bb8..f8f176f2 100644 --- a/src/engine/transition/keyframes/zoom.scss +++ b/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; }