Bug 236397 – [css-transforms] transform animation on SVG element jumps as it ends

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 451425 [details]
matrix-transform-jump-demo

using animate on svg <g> with matrix transform keyframes. It completes the animation to the wrong position - and then instantaneously jumps to the correct position.

[Radar WebKit Bug Importer]

<rdar://problem/88758676>

[Antoine Quint]

Created attachment 451558 [details]
Slight reduced test

I've reduced the test a bit to not visibly interpolate.

[Antoine Quint]

RenderStyle::applyTransform() gets called once at the beginning of the animation and once at the end. Logging transformOperations shows that it differs between the two calls while originTranslate is a zero point.

[Antoine Quint]

The first set of transformOperations doesn't match what is being provided to the animate() call.

[Antoine Quint]

The call to CSSPropertyAnimation::blendProperties() in KeyframeEffect::setAnimatedPropertiesInStyle() takes two identical transforms which are correct and generates an incorrect one.

[Antoine Quint]

This simple diff fixes the bug:

diff --git a/Source/WebCore/animation/CSSPropertyAnimation.cpp b/Source/WebCore/animation/CSSPropertyAnimation.cpp
index 217e768c131d..f7338e6ccc40 100644
--- a/Source/WebCore/animation/CSSPropertyAnimation.cpp
+++ b/Source/WebCore/animation/CSSPropertyAnimation.cpp
@@ -171,6 +171,9 @@ static inline TransformOperations blendFunc(const TransformOperations& from, con
         return resultOperations;
     }
 
+    if (from == to)
+        return from;
+
     if (context.client->transformFunctionListsMatch())
         return to.blendByMatchingOperations(from, context);
     return to.blendByUsingMatrixInterpolation(from, context, is<RenderBox>(context.client->renderer()) ? downcast<RenderBox>(*context.client->renderer()).borderBoxRect().size() : LayoutSize());

But I'm not sure if this is the best fix. On the one hand, this is probably a good thing to do in general, but it also feels like this might be hiding an issue further down in the blending code where we would also yield an incorrect result with non-equal matrices.

[Antoine Quint]

Also, this doesn't fix the original test.

The jump at the end of the animation is no longer happening on Safari 18.6 (20621.3.11.11.3) MacOS 15.6

I can't tell you when it was fixed, but I believe it was fairly recently