Jump to content
Search Community

SVG stroke rendering/browser issue

EJ29 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey all,


I'm inexperienced with SVG and animations in general, so please bear with me.

I am creating a dial with several animating arcs. It works well in Chrome on my computer but when I look on the iPad (either Safari or Chrome), the arcs don't appear*. So I made a very cut-down codepen of it (attached) and looked at it in Chrome and Safari on my computer. It looks fine in Chrome, completely different in Safari. What gives?


*ETA actually, if I rotate the iPad from its original orientation to the other, the arcs do then appear where they should - and then stay when I return the orientation to as it was, but no animation of them occurs.

See the Pen OQeJaO by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks for the demo. 

It seems various browsers have different rules when it comes to animating things in <defs>. Safest to avoid that. If you animate an actual path you should get consistent results.


See the Pen LQKGKQ by anon (@anon) on CodePen


Frankly, I can't keep track of all the quirks but this thread is good to read every few months: 


I suspect there are some SVG experts around here who could give you some more specific details.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...