TweenMax.fromTo() bug in Safari for SVG content

[ElliotGeno 27 Likes (Newbie)]

First check this link in Chrome, Firefox and Safari:

 

Jug Bug

 

Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo().

 

Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties.

 

I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?

[Carl 9,066 Likes (Superhero)]

Hi Elliot,

 

Thanks for the demo.

If you look in Safaris element inspector you will see that GSAP is in fact animating the opacity and all transforms:

http://prntscr.com/69nuqe

 

We have recently been alerted to some bugs in Safari when animating css transforms and opacity on SVG elements.

Safari does not render the updates.

 

Try adding this line of code to your demo:

CSSPlugin.useSVGTransformAttr = true

** use version 1.15.1 **

 

 

This will force CSSPlugin to alter the transform attribute on the svg instead of using inline styles. We have seen this work for this particular issue.

 

In the future, please provide a CodePen (or similar) so that we can test our theories easily. Thanks.

[ElliotGeno 27 Likes (Newbie)]

Sorry about not putting it into CodePen. I actually started down that road for you, but it wouldn't display my externally hosted SVG which was kind of integral to displaying this bug.

See the Pen vEjvvP by pyrografix (@pyrografix) on CodePen

 

Do you know why it wouldn't display an external SVG file?

[ElliotGeno 27 Likes (Newbie)]

This one weird trick fixed my Safari bug. Thank you!