Bug 173154 - CSS animations are not working inside SVG symbols
Summary: CSS animations are not working inside SVG symbols
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2017-06-09 05:15 PDT by kari.pihkala
Modified: 2023-11-28 04:45 PST (History)
12 users (show)

See Also:


Attachments
Symbol CSS Animation Test Case (750 bytes, image/svg+xml)
2017-06-09 05:15 PDT, kari.pihkala
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description kari.pihkala 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.
Comment 1 Radar WebKit Bug Importer 2017-06-12 10:31:50 PDT
<rdar://problem/32715981>
Comment 2 Alexey 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?
Comment 3 Ahmad Saleem 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.
Comment 4 Antoine Quint 2023-04-11 01:31:56 PDT
Could be related to bug 255114.