SVG Rotation bug(?) - Apple specific

[Guido]

Hello,

 

I've got a litle problem when trying to change/set the rotation of a svg on Apple devices.

As you can see in the codepen I've set the rotation of `#progress` to -90 which should set the starting point at the top.

 

Somehow the Apple devices don't seem to respect the rotation because it jumps right back to the default value when I try to change with the code below.

var tl = new TimelineMax();
tl.to('#progress', 1, { rotation: -180 });

 

I've got this reproducable on:

- macOs Sierra 10.2.6 using Safari 11.0.2, Chrome is working fine here

- iPhone 8 & iPhone6 using Safari & Chrome

- iPad 3 using Safari & chome

 

Everything works fine in Windows and Ubuntu.

 

Hope you can help me out

 

See the Pen goMWOp by exploretheworld (@exploretheworld) on CodePen

Edited January 3, 2018 by Guido
Pointed out it works in Windows and Ubuntu

[Carl]

Thanks for the demo. I vaguely recall something like this coming up in the past.

I'm foggy on the details, but if you use 90.5 it seems to work: 

 

.set('#progress', { rotation: -90.5, transformOrigin: 'center center', drawSVG: 0 }, 0)

 

See the Pen ZvJyvp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'll ask around and see if I can find a good answer or a real fix for you.

 

 

[GreenSock]

I believe the problem is actually caused by the fact that for <circle> elements, Apple makes the origin of the stroke at a completely different spot than all the other browsers. It has nothing to do with rotation or a bug in GSAP. It's just an annoying choice Apple made. You can resolve it by converting the <circle> to a <path> so that the coordinates are explicit about where to start. MorphSVGPlugin has a super convenient method for doing this, so all you'd need to do is add this line to the top of your JS:

MorphSVGPlugin.convertToPath("#progress");

 

But I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin. I ran the conversion for you and got this, which you can just swap in for your <circle> instead (thus you wouldn't need MorphSVGPlugin):

<path class="st2" id="progress" d="M589,319 C589,468.1,468.1,589,319,589,169.9,589,49,468.1,49,319,49,169.9,169.9,49,319,49,468.1,49,589,169.9,589,319z"></path>

 

Does that help?

[PointC]

I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach.  (You can also convert it to a path before exporting from your vector software if you like.)

 

I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you.

Happy tweening.

[Guido]

Hey,

 

Thanks for the quick replies

The answers from both @Carl aswell as @GreenSock solved it!

 

@GreenSock, thanks for the clear explanation and for converting that piece of svg. Our company has an Club GreenSock account but I rather use my personal account on the forum so I will keep that plugin in mind!

 

@PointC, I 'll give it a read.

 

[GreenSock]

10 minutes ago, Guido said:

Our company has an Club GreenSock account but I rather use my personal account on the forum so I will keep that plugin in mind!

 

Excellent! Thanks so much. Glad this resolved things. Happy tweening!