173154 2017-06-09 05:15:17 -0700 CSS animations are not working inside SVG symbols 2025-10-17 05:01:04 -0700 1 1 1 Unclassified WebKit SVG Safari Technology Preview Unspecified Unspecified RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=255114 https://bugs.webkit.org/show_bug.cgi?id=296048 BrowserCompat, InRadar P2 Normal --- 1 kari.pihkala webkit-unassigned ahmad.saleem792 clopez dino effrenus graouts graouts jonlee mspooner sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1317358 0 312428 kari.pihkala 2017-06-09 05:15:17 -0700 Created attachment 312428 Symbol CSS Animation Test Case CSS animations are not run for elements inside <symbol> SVG elements. The attached 'Symbol CSS Animation Test Case' shows three rectangles. The red ones are symbols and the green one is not. Only the green one is rotating. I would expect to see all three rectangles rotating. Chrome and Firefox show all three rectangles rotating. Tested on Safari Technology Preview Release 32 (Safari 11.0, WebKit 12604.1.23.0.4) and Safari 10.1.1. 1318280 1 webkit-bug-importer 2017-06-12 10:31:50 -0700 <rdar://problem/32715981> 1774709 2 effrenus 2021-07-04 02:11:54 -0700 Hi, thank you for your work. We seems experiencing the same problem, CSS animation doesn't work for us inside SVG `symbol`s when inserting with `use` element. Test case: https://codepen.io/iamobstinado/pen/zYwvaXW?editors=1000 Tested in browsers: macOS Catalina (10.15.7) * Chrome 91.0.4472.114 ✅ * Firefox 89.0.2 ✅ * Safari 14.1.1 ❌ macOS Big Sur (11.4) * Chrome 91.0.4472.114 ✅ * Firefox 89.0.2 ✅ * Safari 14.1.1 ❌ ✅ – animation works ❌ – animation doesn't work Is there any updates, is it expected behaviour according SVG specs? 1937373 3 ahmad.saleem792 2023-02-28 05:40:38 -0800 It is not working on WebKit ToT (260935@main) as well. Works fine in Chrome Canary 113 and Firefox Nightly 112. 1947876 4 graouts 2023-04-11 01:31:56 -0700 Could be related to bug 255114. 2151898 5 ahmad.saleem792 2025-10-16 17:35:19 -0700 It seems to be working now on Safari Technology Preview 230 (Tahoe). 2151963 6 graouts 2025-10-16 23:47:09 -0700 Somewhat surprisingly, this progressed with 300706@main, the fix for bug 296048. 2152010 7 kari.pihkala 2025-10-17 05:01:04 -0700 Yes, it seems to work in Safari Tech Preview Release 230 (WebKit 21623.1.11.19.3). Thanks! 312428 2017-06-09 05:15:17 -0700 2017-06-09 05:15:17 -0700 Symbol CSS Animation Test Case symbol-css-animate.svg image/svg+xml 750 kari.pihkala PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv c3ZnIgogICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCjxz dHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CkBrZXlmcmFtZXMgbXlyb3RhdGUgewogICAwJSB7IHRyYW5z Zm9ybTogcm90YXRlKDBkZWcpOyB9CiAxMDAlIHsgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsg fQp9Cjwvc3R5bGU+Cgo8c3ltYm9sIGlkPSJNeVN5bWJvbCIgb3ZlcmZsb3c9InZpc2libGUiPgoK ICA8IS0tIGNzcyBhbmltYXRpb24gbm90IHdvcmtpbmcgaW5zaWRlIHN5bWJvbCAtLT4KICA8cmVj dCB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIGZpbGw9InJlZCIgc3R5bGU9ImFuaW1hdGlvbjogbXly b3RhdGUgNHMgaW5maW5pdGU7Ii8+Cgo8L3N5bWJvbD4KCjx1c2UgeD0iNTAiIHk9IjYwIiB3aWR0 aD0iMTYwIiBoZWlnaHQ9IjEyMCIgeGxpbms6aHJlZj0iI015U3ltYm9sIi8+Cjx1c2UgeD0iMTQw IiB5PSI2MCIgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxMjAiIHhsaW5rOmhyZWY9IiNNeVN5bWJvbCIv PgoKPCEtLSBub24tc3ltYm9sIGNzcyBhbmltYXRpb24gd29ya3MgLS0+CjxnIHRyYW5zZm9ybT0i dHJhbnNsYXRlKDEwMCwgMTYwKSI+CiAgPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiBmaWxs PSJncmVlbiIgc3R5bGU9ImFuaW1hdGlvbjogbXlyb3RhdGUgNHMgaW5maW5pdGU7Ii8+CjwvZz4K Cjwvc3ZnPgoK