SVG in Safari (so many issues!)

[Superfein]

Hi there Gsappers,

 

I designed and animated several SVGs and I thought they were working perfectly...then I looked at them in Safari. Ouch!

 

I've shared the first one here, perhaps more to follow. This triangle disappears completely in Safari on MacOS. It reappears when I remove the filter attribute on the polygon but that kills the animation. 

 

Thoughts on how to make this Safari-friendly?

 

Any assistance appreciated! 

 

Adding another Codepen here of another issue, notice how the tube does not animate when in Safari.

See the Pen LYgzgRX?editors=0100 by superfein (@superfein) on CodePen

 

And this one isn't related to GSAP, it's about foreignObjects not scaling properly in Safari. Any ideas on how to fix this one?

See the Pen NWOaOLj?editors=0100 by superfein (@superfein) on CodePen

See the Pen bGmojRv by superfein (@superfein) on CodePen

[Cassie]

Heya!

So safari really hates % values, especially on filters and masks, I can see you have a few of those, swop them out to viewport units instead

Here's a SO on the foreignObject scaling

https://stackoverflow.com/questions/54221528/safari-is-not-respecting-scaling-applied-to-a-foreignobject

[Superfein]

Thanks Cassie!

 

So I tried to change the unit type, and that didn't work. But when I remove preserveAspectRatio="none" from the wrapper SVG of the turquoise tube, then the neon animation works. So there seems to be an issue in Safari where the CSS stretching (the height of the tube is 100vh in my CSS) of the SVG with a "none" aspect ratio set on the SVG, causes the animation to fizzle. Have you come across this before? What exactly are my options here...due to the complexity of the design I need it to be very malleable, that's why I set the aspect ratio to none so I could change it easily in the CSS. I'm kind of stumped. Any ideas?

[Cassie]

Heya, sorry, didn't get a chance to dig in until now - I've never heard of aspect ratio causing an issue, no. 

 

See the Pen ExdQmNW by GreenSock (@GreenSock) on CodePen

 

That seems to work for me in safari? How about you?