From e03ac20f942124bb3989b3bb58bb7b9bf91a7860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 5 Mar 2025 09:33:06 -0500 Subject: [PATCH] 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. --- .../src/client/ReactFiberConfigDOM.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index ba79b08c47..47d6a4cb24 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -1754,7 +1754,7 @@ function animateGesture( moveOldFrameIntoViewport(keyframes[0]); } const reverse = rangeStart > rangeEnd; - const anim = targetElement.animate(keyframes, { + targetElement.animate(keyframes, { pseudoElement: pseudoElement, // Set the timeline to the current gesture timeline to drive the updates. timeline: timeline, @@ -1764,20 +1764,14 @@ function animateGesture( easing: 'linear', // We fill in both direction for overscroll. fill: 'both', + // We play all gestures in reverse, except if we're in reverse direction + // in which case we need to play it in reverse of the reverse. + direction: reverse ? 'normal' : 'reverse', // Range start needs to be higher than range end. If it goes in reverse // we reverse the whole animation below. rangeStart: (reverse ? rangeEnd : rangeStart) + '%', rangeEnd: (reverse ? rangeStart : rangeEnd) + '%', }); - if (!reverse) { - // We play all gestures in reverse, except if we're in reverse direction - // in which case we need to play it in reverse of the reverse. - anim.reverse(); - // In Safari, there's a bug where the starting position isn't immediately - // picked up from the ScrollTimeline for one frame. - // $FlowFixMe[cannot-resolve-name] - anim.currentTime = CSS.percent(100); - } } export function startGestureTransition(