Jump to content
Search Community

Draw svg Issue with firefox

zozo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi every one, 

 

I have an issue with draw svg on Firefox. 

It's pretty weird, on my website, the animation work, but not until the end, and then I have an error : TypeError: e is undefined and it loop with that error. 

On the code pen, it doesn't work at all. 

But it work fine chrome and safari. 

Thanks for the help. 

 

Best

 

See the Pen pZXVWw by romainmalauzat (@romainmalauzat) on CodePen

Link to comment
Share on other sites

Hello @zozo and welcome to the GreenSock Forum!

 

The issue your seeing is happening because id #mask9 is a <line> element.

 

It looks like your <line> element (#mask9) for the letter i, is causing this error to be thrown. You can see when i comment out the SVG <line> element (#mask9) and the from() tween for #mask9. The animation does not throw that error.

 

I will shoot a message to the Mighty @Carl and Jack @GreenSock and see if they can see why that happens with that <line> element.

 

See the Pen GBbGrW?editors=1010 by jonathan (@jonathan) on CodePen

 

Please standby :)

  • Like 4
Link to comment
Share on other sites

The mighty @Jonathan beat me to it, but I just came to the same conclusion. For some reason the line is throwing an error in FF when it is in a mask. Outside of a mask (or clip-path) it draws fine. Here's the project stripped down to just the problem line and mask.

 

See the Pen NBZBxo by PointC (@PointC) on CodePen

I'm not quite sure what's happening there either. 

  • Like 5
Link to comment
Share on other sites

I was on it too.

 

It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path.

 

PS: Yup I have started digging into files, seems fun.

  • Like 4
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.
×
×
  • Create New...