236397 2022-02-09 12:26:45 -0800 [css-transforms] transform animation on SVG element jumps as it ends 2025-08-22 02:31:35 -0700 1 1 1 Unclassified WebKit Animations Safari 15 Unspecified Unspecified RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 halifirien webkit-unassigned dino graouts graouts halifirien mrobinson sabouhallawa webkit-bug-importer oldest_to_newest 1839349 0 451425 halifirien 2022-02-09 12:26:45 -0800 Created attachment 451425 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. 1839714 1 webkit-bug-importer 2022-02-10 09:11:32 -0800 <rdar://problem/88758676> 1839748 2 451558 graouts 2022-02-10 09:57:24 -0800 Created attachment 451558 Slight reduced test I've reduced the test a bit to not visibly interpolate. 1839855 3 graouts 2022-02-10 11:42:00 -0800 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. 1839859 4 graouts 2022-02-10 11:52:34 -0800 The first set of transformOperations doesn't match what is being provided to the animate() call. 1839864 5 graouts 2022-02-10 12:09:42 -0800 The call to CSSPropertyAnimation::blendProperties() in KeyframeEffect::setAnimatedPropertiesInStyle() takes two identical transforms which are correct and generates an incorrect one. 1839869 6 graouts 2022-02-10 12:20:42 -0800 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. 1839871 7 graouts 2022-02-10 12:27:36 -0800 Also, this doesn't fix the original test. 2137396 8 halifirien 2025-08-19 04:45:27 -0700 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 451425 2022-02-09 12:26:45 -0800 2022-02-09 12:26:45 -0800 matrix-transform-jump-demo iso.html text/html 2366 halifirien PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5zdmcg Z2V0RW5jbG9zdXJlTGlzdDwvdGl0bGU+CiAgPC9oZWFkPgogIDxzY3JpcHQgdHlwZT0ibW9kdWxl Ij4KICAgIGNvbnN0IGlzb21ldHJpY01hdHJpeCA9IChzdmcpID0+IHsKICAgICAgbGV0IGNlbnRl ciA9IHsKICAgICAgICB4OiBOdW1iZXIoc3ZnLmdldEF0dHJpYnV0ZSgnd2lkdGgnKSkgLyAyLAog ICAgICAgIHk6IE51bWJlcihzdmcuZ2V0QXR0cmlidXRlKCdoZWlnaHQnKSkgLyAyLAogICAgICB9 CiAgICAgIGxldCB6YSA9IE1hdGguUEkgLyA0OwogICAgICBsZXQgbXogPSBuZXcgRE9NTWF0cml4 KFsKICAgICAgICBNYXRoLmNvcyh6YSksIE1hdGguc2luKHphKSwgMCwgMCwgLU1hdGguc2luKHph KSwgTWF0aC5jb3MoemEpLCAwLCAwLCAwLCAwLCAxLCAwLCAwLCAwLCAwLCAxCiAgICAgIF0pCiAg ICAgIGxldCB4YSA9IE1hdGguYXRhbihNYXRoLnNxcnQoMikpCiAgICAgIGxldCBteCA9IG5ldyBE T01NYXRyaXgoWwogICAgICAgIDEsIDAsIDAsIDAsIDAsIE1hdGguY29zKHhhKSwgTWF0aC5zaW4o eGEpLCAwLCAwLCAtTWF0aC5zaW4oeGEpLCBNYXRoLmNvcyh4YSksIDAsIDAsIDAsIDAsIDEKICAg ICAgXSkKICAgICAgbGV0IG0gPSBteC5tdWx0aXBseShteikKICAgICAgbGV0IG0yID0gc3ZnLmNy ZWF0ZVNWR01hdHJpeCgpCiAgICAgIG0yLmEgPSBtLm0xMTsKICAgICAgbTIuYiA9IG0ubTEyOwog ICAgICBtMi5jID0gbS5tMjE7CiAgICAgIG0yLmQgPSBtLm0yMjsKICAgICAgbTIuZSA9IG0ubTMx OwogICAgICBtMi5mID0gbS5tMzI7CiAgICAgIHJldHVybiBzdmcuY3JlYXRlU1ZHTWF0cml4KCku dHJhbnNsYXRlKGNlbnRlci54LCBjZW50ZXIueSkubXVsdGlwbHkobTIpLnNjYWxlKDAuOCkudHJh bnNsYXRlKC1jZW50ZXIueCwgLWNlbnRlci55KQogICAgfQoKICAgIGNvbnN0IGlzb21ldHJpY1Zp ZXcgPSAoc3ZnLCBzdGFnZSkgPT4gewogICAgICBsZXQgbTE7CiAgICAgIHRyeSB7CiAgICAgICAg bTEgPSBzdGFnZS50cmFuc2Zvcm0uYmFzZVZhbC5nZXRJdGVtKDApPy5tYXRyaXg7CiAgICAgIH0g Y2F0Y2ggKGVycikgewogICAgICAgIG0xID0gc3ZnLmNyZWF0ZVNWR01hdHJpeCgpOwogICAgICB9 CiAgICAgIHN0YWdlLnRyYW5zZm9ybS5iYXNlVmFsLmNsZWFyKCk7CiAgICAgIGxldCBtNCA9IGlz b21ldHJpY01hdHJpeChzdmcpCiAgICAgIGxldCBrZXlGcmFtZXMgPSBbCiAgICAgICAgeyB0cmFu c2Zvcm06IGBtYXRyaXgoJHttMS5hfSwke20xLmJ9LCR7bTEuY30sJHttMS5kfSwke20xLmV9LCR7 bTEuZn0pYCB9LAogICAgICAgIHsgdHJhbnNmb3JtOiBgbWF0cml4KCR7bTQuYX0sJHttNC5ifSwk e200LmN9LCR7bTQuZH0sJHttNC5lfSwke200LmZ9KWAgfQogICAgICBdCiAgICAgIGxldCBvcHRp b25zID0gewogICAgICAgIGVhc2luZzogJ2Vhc2UtaW4tb3V0JywgZHVyYXRpb246IDEwMDAvLywg ZmlsbDogJ2ZvcndhcmRzJwogICAgICB9CiAgICAgIHN0YWdlLmFuaW1hdGUoa2V5RnJhbWVzLCBv cHRpb25zKS5maW5pc2hlZC50aGVuKCgpID0+IHsKICAgICAgICBsZXQgdHJhbnNmb3JtID0gc3Zn LmNyZWF0ZVNWR1RyYW5zZm9ybUZyb21NYXRyaXgobTQpOwogICAgICAgIHN0YWdlLnRyYW5zZm9y bS5iYXNlVmFsLmluaXRpYWxpemUodHJhbnNmb3JtKTsKICAgICAgfSkKICAgIH0KICAgIGRvY3Vt ZW50LnF1ZXJ5U2VsZWN0b3IoJ2J1dHRvbicpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKGUp ID0+IHsKICAgICAgbGV0IGdyb3VwID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignZycpCiAgICAg IGdyb3VwLnRyYW5zZm9ybS5iYXNlVmFsLmNsZWFyKCkKICAgICAgaXNvbWV0cmljVmlldyhkb2N1 bWVudC5xdWVyeVNlbGVjdG9yKCdzdmcnKSwgZ3JvdXApCiAgICB9KQogIDwvc2NyaXB0PgogIDxi b2R5PgogICAgPHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9JzUwMCcgdmlld0JveD0iMCAwIDYwMCA1 MDAiPgogICAgICA8Zz4KICAgICAgICA8cmVjdCB4PSIxMDAiIHk9IjEwMCIgd2lkdGg9IjE2MCIg aGVpZ2h0PSIzMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siLz4KICAgICAgICA8cmVjdCB4 PSIzMDAiIHk9IjMwMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIHN0cm9r ZT0iYmxhY2siLz4KICAgICAgICA8cmVjdCB4PSIzMDAiIHk9IjIwMCIgd2lkdGg9IjEwMCIgaGVp Z2h0PSIxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siLz4KICAgICAgPC9nPgogICAgPC9z dmc+CiAgICA8YnV0dG9uIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlOyI+QW5pbWF0ZSBJc29tZXRy aWM8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4= 451558 2022-02-10 09:57:24 -0800 2022-02-10 09:57:24 -0800 Slight reduced test bug-236397.html text/html 1342 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5SZWR1 Y3Rpb24gZm9yIGJ1ZyAyMzYzOTc8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxzdmcg d2lkdGg9IjYwMCIgaGVpZ2h0PSc1MDAnIHZpZXdCb3g9IjAgMCA2MDAgNTAwIj4KICAgICAgPHJl Y3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMzAwIiAvPgogICAgPC9zdmc+ CiAgICA8c2NyaXB0IHR5cGU9Im1vZHVsZSI+Cgpjb25zdCBzdmcgPSBkb2N1bWVudC5xdWVyeVNl bGVjdG9yKCdzdmcnKTsKCmNvbnN0IGNlbnRlciA9IHsKICAgIHg6IE51bWJlcihzdmcuZ2V0QXR0 cmlidXRlKCd3aWR0aCcpKSAvIDIsCiAgICB5OiBOdW1iZXIoc3ZnLmdldEF0dHJpYnV0ZSgnaGVp Z2h0JykpIC8gMiwKfTsKCmNvbnN0IHphID0gTWF0aC5QSSAvIDQ7CmNvbnN0IG16ID0gbmV3IERP TU1hdHJpeChbCiAgTWF0aC5jb3MoemEpLCBNYXRoLnNpbih6YSksIDAsIDAsIC1NYXRoLnNpbih6 YSksIE1hdGguY29zKHphKSwgMCwgMCwgMCwgMCwgMSwgMCwgMCwgMCwgMCwgMQpdKTsKCmNvbnN0 IHhhID0gTWF0aC5hdGFuKE1hdGguc3FydCgyKSk7CmNvbnN0IG14ID0gbmV3IERPTU1hdHJpeChb CiAgMSwgMCwgMCwgMCwgMCwgTWF0aC5jb3MoeGEpLCBNYXRoLnNpbih4YSksIDAsIDAsIC1NYXRo LnNpbih4YSksIE1hdGguY29zKHhhKSwgMCwgMCwgMCwgMCwgMQpdKTsKCmNvbnN0IG0gPSBteC5t dWx0aXBseShteik7CmNvbnN0IG0yID0gc3ZnLmNyZWF0ZVNWR01hdHJpeCgpOwptMi5hID0gbS5t MTE7Cm0yLmIgPSBtLm0xMjsKbTIuYyA9IG0ubTIxOwptMi5kID0gbS5tMjI7Cm0yLmUgPSBtLm0z MTsKbTIuZiA9IG0ubTMyOwoKY29uc3QgaXNvbWV0cmljTWF0cml4ID0gc3ZnLmNyZWF0ZVNWR01h dHJpeCgpLnRyYW5zbGF0ZShjZW50ZXIueCwgY2VudGVyLnkpLm11bHRpcGx5KG0yKS5zY2FsZSgw LjgpLnRyYW5zbGF0ZSgtY2VudGVyLngsIC1jZW50ZXIueSkKY29uc3QgbWF0cml4U3RyaW5nID0g YG1hdHJpeCgke2lzb21ldHJpY01hdHJpeC5hfSwke2lzb21ldHJpY01hdHJpeC5ifSwke2lzb21l dHJpY01hdHJpeC5jfSwke2lzb21ldHJpY01hdHJpeC5kfSwke2lzb21ldHJpY01hdHJpeC5lfSwk e2lzb21ldHJpY01hdHJpeC5mfSlgOwoKZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncmVjdCcpLmFu aW1hdGUoCiAgICB7IHRyYW5zZm9ybTogW21hdHJpeFN0cmluZywgbWF0cml4U3RyaW5nXSB9LAog ICAgeyBkdXJhdGlvbjogMTAwMCwgZmlsbDogJ2ZvcndhcmRzJywgZGVsYXk6IDEwMDAgfQopOwoK ICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==