svg-clip-path animation problem in Safari

[RaoulUnger]

Hi,

I'm trying to animate a SVG clip-path masking an image in such a way that it will work in all browers, including IE. I'm using Greensock because 'normal' css-animation on clip-paths doesn't work at all in IE. I've defined two paths within one clipPath, and animated them separately (different speeds). The included method seems to work in all browers, but there is one problem: Safari shows erratic behaviour: the bottom part of the circle often isn't drawn. Weirdly enough, it does draw when I 'inspect' the element to look at the code.

 

In the pen you see the animated image on the left, and the entire image for reference on the right. The image is png with the parts outside the circle being transparent.

Any thoughts would be appreciated!!

I'm very new at Greensock, so please forgive me for not seeing the obvious...

Thanks!

See the Pen rbdpdp by RaoulUnger (@RaoulUnger) on CodePen

[GreenSock]

Yeah, Safari has quite a few really weird rendering bugs (totally unrelated to GSAP). Sometimes you've gotta "trick" it. In this case, it looks like it's creating a bounding box for the clip-path initially and never updating it as the transforms get applied. So I'd just add a <rect> in your <clipPath> so that it opens up that area. Here's a fork: 

See the Pen 501dc1ba55a0cceb854f72d9377bdc8e by GreenSock (@GreenSock) on CodePen

 

Also, I'd probably follow the spec and have the clipPath defined as an attribute but that may not be a big deal. 

[RaoulUnger]

Thanks for the answer! I updated my code with yours. You were right about the attribute-definition.
I can see that the trick of the rectangle works in de codepen viewed in Safari. Weirdly enough, the same trick doesn't seem to work on the webpage where i'm testing the exact same code (again viewed in Safari):

 

http://decamerone.info/test-greensock-werkt/

It get's weirder: that same page works fine in Chrome and Firefox (both on a mac and in windows), but your codepen doesn't animate in Firefox...

Cheers!

 

[PointC]

The problem in Firefox is that demo is using an old version of GSAP (1.18.0). If you switch to the latest version (2.1.2), it works correctly in FF for me. Happy tweening.

[RaoulUnger]

Ok, thanks!
The webpage version works now too, that was due to the page not having been saved (my mistake).

Cheers!