NEW 173154
CSS animations are not working inside SVG symbols 
https://bugs.webkit.org/show_bug.cgi?id=173154
Summary CSS animations are not working inside SVG symbols
kari.pihkala
Reported 2017-06-09 05:15:17 PDT
Created attachment 312428 [details] 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.
Attachments
Symbol CSS Animation Test Case (750 bytes, image/svg+xml)
2017-06-09 05:15 PDT, kari.pihkala 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-06-12 10:31:50 PDT
<rdar://problem/32715981>
Alexey
Comment 2 2021-07-04 02:11:54 PDT
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?
Ahmad Saleem
Comment 3 2023-02-28 05:40:38 PST
It is not working on WebKit ToT (260935@main) as well. Works fine in Chrome Canary 113 and Firefox Nightly 112.
Antoine Quint
Comment 4 2023-04-11 01:31:56 PDT
Could be related to bug 255114.
Note You need to log in before you can comment on or make changes to this bug.