Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

.setClassToggle issues in Safari

Recommended Posts

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

Link to comment
Share on other sites

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.


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.