Set direction in animate call directly (#32523)
Setting the animation's currentTime causes a quirk where the transition can end up off by a bit and the end state can be slightly off the end time. However, I realized that we don't have to because if we just set the direction in the `animate()` call directly the Safari bug goes away.
Sebastian Markbåge committed
Mar 5, 2025 at 09:33 UTC
e03ac20f942124bb3989b3bb58bb7b9bf91a7860
1 file changed
+4
-10
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+4
-10
@@ -1754,7 +1754,7 @@ function animateGesture(
1754
moveOldFrameIntoViewport(keyframes[0]);
1755
}
1756
const reverse = rangeStart > rangeEnd;
1757
- const anim = targetElement.animate(keyframes, {
1757
+ targetElement.animate(keyframes, {
1758
pseudoElement: pseudoElement,
1759
// Set the timeline to the current gesture timeline to drive the updates.
1760
timeline: timeline,
@@ -1764,20 +1764,14 @@ function animateGesture(
1764
easing: 'linear',
1765
// We fill in both direction for overscroll.
1766
fill: 'both',
1767
+ // We play all gestures in reverse, except if we're in reverse direction
1768
+ // in which case we need to play it in reverse of the reverse.
1769
+ direction: reverse ? 'normal' : 'reverse',
1770
// Range start needs to be higher than range end. If it goes in reverse
1771
// we reverse the whole animation below.
1772
rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
1773
rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
1774
});
1772
- if (!reverse) {
1773
- // We play all gestures in reverse, except if we're in reverse direction
1774
- // in which case we need to play it in reverse of the reverse.
1775
- anim.reverse();
1776
- // In Safari, there's a bug where the starting position isn't immediately
1777
- // picked up from the ScrollTimeline for one frame.
1778
- // $FlowFixMe[cannot-resolve-name]
1779
- anim.currentTime = CSS.percent(100);
1780
- }
1775
}
1776
1777
export function startGestureTransition(