Jump to content
Search Community

And entire development works in Safari/Chrome but NOT in FireFox

fatSkeeter 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

Here is a demo of a unit I am working on:

https://www.redgearstudios.com/Working/SanPell/57624/300x250/Delightways_300x250.html

 

This unit works fine in Safari and Chrome (MAC), but doesn't work at all in FireFox.  In FireFox, there is an error coming up in the console:

 

NS_ERROR_FAILURE:  https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js Line

15

 

I also have tried using Sizmek's v1_17_0 of TweenMax.min.js

 

I also have used this link as well: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

 

Same issue.

 

Can this be part of FireFox?  Is this part of my code?

 

Thanks,

 

Bryan C Wienczkowski

Link to comment
Share on other sites

That sounds like a funky glitch in Firefox related to SVG and the fact that it burps if you try animating a property of an SVG element that's not visibly rendered in the DOM (weird, I know). Have you tried the latest version of GSAP? https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js We implemented a workaround a while back. Keep in mind that CloudFlare (who runs the CDN) refuses to support the "/latest/" directory anymore (we begged and pleaded but to no avail). So it's probably forever stuck on 1.18.0. You should always target a specific version from now on. 1.18.4 is the latest at this point, although we plan to push out 1.18.5 within the next week. :)

 

Oh, and the other option is to just make sure that your SVG elements that you plan to animate are actually in the DOM and rendered visually before you try animating them. 

  • Like 2
Link to comment
Share on other sites

This can happen if a SVG element is either missing, has display:none or is not visible. It will throw that NS_ERROR_FAILURE, since any element that is missing, has display:none or hidden will be removed from the render tree making it throw that error since it does not exist.

 

Firefox is following the SVG spec in this regard! That is why i always develop in Firefox first, since Firefox will always follow the spec, versus webkit based browsers like Safari and Chrome which allow this wild west non-standard behavior.

 

Here is a reference regarding the SVG display behavior:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

 

And it is also stated in the W3C spec for SVG 1.1

 

https://www.w3.org/TR/SVG11/painting.html#DisplayProperty

  • A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

Here is a list of Firefox Error Codes:

 

https://developer.mozilla.org/en-US/docs/Mozilla/Errors

  • NS_ERROR_FAILURE (0x80004005)
        This is the most general of all the errors and occurs for all errors for which a more specific error code does not apply.

So just make sure when targeting SVG elements that use display: none, that they are not directly rendered in the rendering tree. So they won't exist as far as the SVG spec is concerned.

 

:)

  • Like 2
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...