Improve bespoke transition animations for Safari compatibility #641
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix #572.
Fixed issues
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 droppingbox-shadow
property is seems to cause misalignment. So we are disabled shadow effect in Safari.rotate
: Rotating animation has too showy effectrotateY(0.0001deg)
instead ofrotateY(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
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>
.