Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve bespoke transition animations for Safari compatibility #641

Merged
merged 3 commits into from
Jan 24, 2025

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
1 participant