149617 2015-09-29 00:46:34 -0700 SVG text transform css animation has no effect 2023-04-26 03:15:44 -0700 1 1 1 Unclassified WebKit SVG WebKit Nightly Build Unspecified Unspecified RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=243493 BlinkMergeCandidate, InRadar P2 Normal --- 1 kari.pihkala webkit-unassigned ahmad.saleem792 bfulgham karlcow sabouhallawa webkit-bug-importer zimmermann oldest_to_newest 1129175 0 262048 kari.pihkala 2015-09-29 00:46:34 -0700 Created attachment 262048 CSS Animation of svg text element transform SVG text element transform can't be animated with CSS Animations. Translate, scale or rotate doesn't work. The attached example has a translate animation for a text and rect element. Only the rect element is animated. Also, the steps timing function for the color animation doesn't apply anymore. If the transform animation is removed, then the color animation works as expected. 1129181 1 kari.pihkala 2015-09-29 01:02:46 -0700 I filed a similar bug for Chromium: https://code.google.com/p/chromium/issues/detail?id=537121 1884451 2 bfulgham 2022-07-15 17:12:24 -0700 Oh, this looks so silly in Safari. We must fix it. 1884452 3 webkit-bug-importer 2022-07-15 17:12:36 -0700 <rdar://problem/97101948> 1905123 4 ahmad.saleem792 2022-10-12 11:03:46 -0700 Seems to be changes here: https://github.com/WebKit/WebKit/blob/b1c9ea1fcb1eac9c9a31b4331fecaff051669fe0/Source/WebCore/rendering/svg/RenderSVGInline.cpp#L142 _____ From #if ENABLE(LAYER_BASED_SVG_ENGINE) if (!document().settings().layerBasedSVGEngineEnabled() && diff == StyleDifference::Layout) setNeedsBoundariesUpdate(); #else if (diff == StyleDifference::Layout) setNeedsBoundariesUpdate(); #endif ___ #if ENABLE(LAYER_BASED_SVG_ENGINE) if (!document().settings().layerBasedSVGEngineEnabled() && diff == StyleDifference::Layout) { setNeedsBoundariesUpdate(); if (style()->hasTransform()) setNeedsTransformUpdate(); } #else if (diff == StyleDifference::Layout) { setNeedsBoundariesUpdate(); if (style()->hasTransform()) setNeedsTransformUpdate(); } #endif _______ I don't know whether this will work or not. But I can give it a try. Thanks! 1905139 5 ahmad.saleem792 2022-10-12 11:52:03 -0700 https://github.com/WebKit/WebKit/pull/5297 1911117 6 ahmad.saleem792 2022-11-08 14:58:53 -0800 (In reply to Ahmad Saleem from comment #5) > https://github.com/WebKit/WebKit/pull/5297 We need to account for case of "transition is from a style with transform to a style without it" and based on comment from Darin, we need to use like this: oldStyle && oldStyle->hasTransform() -> Unfortunately, I don't have expertise to write test case for above case of "transition is from a style with transform to a style without it", I am going to close my PR and leave it for someone else to take it up and fix it. Thanks! 1948931 7 ahmad.saleem792 2023-04-14 21:43:02 -0700 It seems to be now fixed in Safari Technology Preview 167 compared to Safari 16.4. We can close this by marking 'RESOLVED CONFIGURATION CHANGED'. :-) CCing - Karl to confirm as well. 1949055 8 karlcow 2023-04-16 17:12:02 -0700 It was fixed by Bug 243493 ? 1949057 9 ahmad.saleem792 2023-04-16 17:25:15 -0700 (In reply to Karl Dubost from comment #8) > It was fixed by Bug 243493 ? LBSE is not turned on by default and I don't have it enabled as well. So I don't think it will be LBSE patch. 1951296 10 kari.pihkala 2023-04-26 03:15:44 -0700 I tested this on Safari Technology Preview 168 and it seems to be fixed. Thanks! 262048 2015-09-29 00:46:34 -0700 2015-09-29 00:46:34 -0700 CSS Animation of svg text element transform text-css-transform-color.svg image/svg+xml 1121 kari.pihkala PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz dmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdC b3g9IjAgMCAzMjAgMjQwIj4KICAgIDxzdHlsZT4KQC13ZWJraXQta2V5ZnJhbWVzIGEwX3QgeyAw JSB7IC13ZWJraXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUoNTBweCw1MHB4KTsgfSAxMDAlIHsgLXdl YmtpdC10cmFuc2Zvcm06IHRyYW5zbGF0ZSgyMDBweCwyMDBweCk7IH0gfQpALXdlYmtpdC1rZXlm cmFtZXMgYTBfZiB7IDAlIHsgZmlsbDogIzAwMDAwMDsgLXdlYmtpdC1hbmltYXRpb24tdGltaW5n LWZ1bmN0aW9uOiBzdGVwcygxKTsgfSAxMDAlIHsgZmlsbDogI2ZmZmYwMDsgLXdlYmtpdC1hbmlt YXRpb24tdGltaW5nLWZ1bmN0aW9uOiBzdGVwcygxKTsgfSB9CkBrZXlmcmFtZXMgYTBfdCB7IDAl IHsgdHJhbnNmb3JtOiB0cmFuc2xhdGUoNTBweCw1MHB4KTsgfSAxMDAlIHsgdHJhbnNmb3JtOiB0 cmFuc2xhdGUoMjAwcHgsMjAwcHgpOyB9IH0KQGtleWZyYW1lcyBhMF9mIHsgMCUgeyBmaWxsOiAj MDAwMDAwOyBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBzdGVwcygxKTsgfSAxMDAlIHsgZmls bDogI2ZmZmYwMDsgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogc3RlcHMoMSk7IH0gfQogICAg PC9zdHlsZT4KICAgIDx0ZXh0IHN0cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3Jt PSJ0cmFuc2xhdGUoNTAsNTApIiBzdHlsZT0iLXdlYmtpdC1hbmltYXRpb246IGEwX3QgMnMgbGlu ZWFyIGJvdGgsIGEwX2YgMnMgbGluZWFyIGJvdGg7IGFuaW1hdGlvbjogYTBfdCAycyBsaW5lYXIg Ym90aCwgYTBfZiAycyBsaW5lYXIgYm90aDsiPlRSQU5TTEFURTwvdGV4dD4KICAgIDxyZWN0IHN0 cm9rZT0ibm9uZSIgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjkyIiBoZWlnaHQ9IjUiIHRyYW5zZm9y bT0idHJhbnNsYXRlKDUwLDUwKSIgc3R5bGU9Ii13ZWJraXQtYW5pbWF0aW9uOiBhMF90IDJzIGxp bmVhciBib3RoLCBhMF9mIDJzIGxpbmVhciBib3RoOyBhbmltYXRpb246IGEwX3QgMnMgbGluZWFy IGJvdGgsIGEwX2YgMnMgbGluZWFyIGJvdGg7Ii8+Cjwvc3ZnPgo=