Skip to content

Conversation

@yhatt
Copy link
Member

@yhatt yhatt commented Jan 24, 2025

Fix #572.

Fixed issues

  • The timing of animation timing functions do not match between the outgoing slide and incoming slide
    • When animating transform property, its definitions should put into both starting keyframe and ending keyframe. If not, animation-timing-function property in starting keyframe will not work only in Safari.
  • drop: The incoming slide is slipping while dropping
    • box-shadow property is seems to cause misalignment. So we are disabled shadow effect in Safari.
  • rotate: Rotating animation has too showy effect
    • Use rotateY(0.0001deg) instead of rotateY(0). Using a positive vector will suppress showy animating in motion interpolation.

Other fixes for transition animations

  • flip: Stopped moving rotation axis.
  • rotate: Prevented overlapping slides while rotating.

Known issues

  • Morphing animation by view-transition-name CSS property will not work correctly in Safari, due to force scaling by marpit-svg-polyfill to fix Safari rendering bug about SVG with <foreignObject>.

@yhatt yhatt added the transitions Marp CLI transitions feature label Jan 24, 2025
@yhatt yhatt merged commit 2ec1cdc into main Jan 24, 2025
1 check passed
@yhatt yhatt deleted the safari-bespoke-transition-compatibility branch January 24, 2025 19:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

transitions Marp CLI transitions feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bespoke transitions] Compatibility with Safari

2 participants