.setClassToggle issues in Safari

[mikekerby]

I am trying to add a class into an SVG object, inside a foreign object area. The purpose is to add a class at the trigger point and tell that class to fade the section in (see css for .foreigntext and .foreigntext.fade-in). 

 

 

It works great in Chrome, but it doesn't work in Safari. Is there a known issue with safari? Or do I have my code stated incorrectly. Any help would be appreciated. You will see the CSS style 

See the Pen WRVyzv by c308marketing (@c308marketing) on CodePen

[OSUblake]

Well have you tried using GSAP? You're using ScrollMagic, which is not a GSAP product, and CSS transitions. 

 

But I'll give you some help. Don't use foreignObject unless you have a very specific reason to, like rendering HTML to canvas, because it's most likely not going behave the same in every browser. On top of that, IE doesn't even support foreignObject. 

 

And I wouldn't say it works great in Chrome. Here's what your demo looked like on my machine. It cuts half of the text off until the transition is complete.

 

 

 

You're going to much better off just layering your svg with some html... and using GSAP for all your animations.

.