Jump to content
Search Community

NS_ERROR_FAILURE

miks 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,

 

I just found out recently that the website that I am developing is having this issue with NS_ERROR_FAILURE in Firefox.

http://www.gcreativelab.com/

 

So basically when you navigate using Firefox it stop on each page. But if you refresh the page it will work. But each first time to change page it will lag/stop due to the error.

I hope someone could help me figure out where i the source of this error, cause I just couldn't find a way to find it.

Cheers.
 

Link to comment
Share on other sites

is there any way you can supply a reduced test case?

or can you give us the exact steps in order to see the issue?

 

I had a pretty bad time trying to use the site and I'm not sure what I'm supposed to be looking for. I didn't see the error you mentioned but there were plenty of times I couldn't click on things I thought should be clickable like "read more" text. 

 

The most common reason for that error is that you are trying to use DrawSVG on an SVG that is not yet rendered. Maybe that will help you track it down.

 

Unfortunately, its just way too time consuming for us to try to debug a live site with tons of javascript crammed into a single file. 

 

  • Like 2
Link to comment
Share on other sites

Thats quick! Thanks Carl.

Basically when you view the site on firefox the error occurs on every first instance of click the main links. But after you refresh the page the error disappears.


I am not using DrawSVG. Also it is perfectly working in other browser except Firefox.

 

Thats also the reason why I came here cause I couldn't find the source of error.

Cheers!

Link to comment
Share on other sites

It is indeed SUPER difficult to troubleshoot a live site like that with minified files and tons of other variables in the mix. A reduced test case in codepen is your best shot at getting an answer in these free forums. 

 

I will say I've seen that Firefox issue before when attempting to set certain properties/attributes on SVG elements that aren't in the DOM or have display:none. That's the most likely culprit. We've implemented several workarounds over the years, though it's impossible to solve every scenario. 

 

Have you tried updating to the latest GSAP? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi @miks ans Welcome to the GreenSock forum!

 

NS stands for NameSpace.
 

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.

 

 

Please also see

 

 

Happy Tweening! :)

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks for all of the response.

It help me to narrow the error.

I have found the culprit and its below. I see no display: none or any visibility issue. But I have checked all the svg and some of the property has fill to none and try to fill everything but still the error occurs.

 

Quote

var values = MorphSVGPlugin.pathDataToBezier("#circlePath");
          
          TweenMax.set('circle', {
            x:                    values[0].x,
            y:                    values[0].y,
            xPercent:             -50,
            yPercent:             -50,
            transformOrigin:  "50% 50%"
          });

          TweenMax.to('#Ellipse_3', 1, {bezier: {values:values, type:"cubic"}, ease:Linear.easeNone, repeat:-1, paused:false});
          TweenMax.to('#Ellipse_4', 1, {bezier: {values:values, type:"cubic"}, ease:Linear.easeNone, repeat:-1, paused:false});
          TweenMax.fromTo("#Group_11306", 0.5, {
            x:"+=7"
          }, {
            x:"-=7",
            yoyo:true,
            repeat:-1
          });

          var indicatorText = new TimelineMax({repeat: -1, delay: 1});
          
          indicatorText.to(".indicatorText", 1, 
          {text:{value:"DRAG", delimiter:" "},ease:Expo.easeInOut})
            .to(".indicatorText", 1, 
           {text:{value:"SCROLL", delimiter:" "},ease:Expo.easeInOut,delay: 0.4});

 

 

 

<svg class="circle" xmlns="http://www.w3.org/2000/svg" width="34.315" height="31.929" viewBox="0 0 34.315 31.929">
<g id="Group_11307" data-name="Group 11307" transform="translate(1623.014 258)">
    <path id="circlePath" data-name="Path 10680" d="M15.976.5A15.62,15.62,0,0,1,30.5,10.631,15.481,15.481,0,0,1,8.014,29.25,15.627,15.627,0,0,1,.794,12.957,15.623,15.623,0,0,1,15.976.5Z" transform="translate(-1623.006 -258)" fill="#fff" stroke="#0f294b" stroke-width="1"/>
    <circle id="whitebg" cx="15.063" cy="15.063" r="15.063" transform="translate(-1622.094 -257.046)" fill="#fff"/>
    <g id="smallcircle" class="circleSmall" transform="translate(-1623.006 -258)">
    <circle id="Ellipse_3" data-name="Ellipse 3" cx="2.5" cy="2.5" r="2.5" transform="translate(29.307 13.954)" fill="#d81c5c"/>
    <circle id="Ellipse_4" data-name="Ellipse 4" cx="2" cy="2" r="2" transform="translate(29.807 14.454)" fill="#fff" stroke="#fff" stroke-width="1"/>
    </g>
    <g id="Group_11306" data-name="Group 11306" transform="translate(-1623.006 -258)">
    <path id="Play" d="M19.91,13.731l2.761,1.631,1.9,1.123-4.663,2.549Z" fill="#d81c5c"/>
    <line id="Line_10" data-name="Line 10" x1="12" transform="translate(8.807 16.454)" fill="#fff" stroke="#d81c5c" stroke-width="1"/>
    </g>
</g>
</svg>


Many thanks!
 

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...