NS_ERROR_FAILURE in FireFox when trying to animate element with display="none"

[48DESIGN]

Hey guys,

 

I just stumpled upon a problem that only occured in FireFox, giving me the very unspecific error message "NS_ERROR_FAILURE" when animating an SVG. In Chrome, it worked without a problem.

After spending quite some time trying to find what's wrong, it turned out that there was an element that was hidden via display="none" for testing purposes but that was still being animated with GSAP. I created a simplistic test case, see the Codepen.

 

In the uncompressed TweenMax.js, it's in line 3000:

b = e.getBBox();

It's not a big issue now that I found out what was going on, but maybe this is something that GSAP could check and then just ignore the animation if the element is not visible anyway, to prevent others to run into this in the future.

See the Pen bdPxZg by anon (@anon) on CodePen

[Jonathan]

Hello 48DESIGN, and welcome to the GreenSock Forum!

 

I don't believe this to be a bug with GSAP or Firefox. And has more to do with using display:none on your SVG child elements. In your case, your <polygon> tag with id #test  has display:none  on it.

 

According to the SVG display spec:

 

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

• The geometry of a graphics element with display set to none is not included in bounding box and clipping paths calculations.
• A value of display="none" indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.
• 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.

So since you are using display:none the browser is not getting the bounding box calculation according to the SVG display spec

 

If you need that element to be hidden temporarily then use visibility:hidden  on that element in your CSS style sheet, not display:none.

#test {
    visibility:hidden;
}

Or use the GSAP set() method to adjust the opacity and visibility CSS property using autoAlpha:

TweenLite.set("#test",{autoAlpha:0});

autoAlpha is part of the CSSPlugin

 

autoAlpha

Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

Also i noticed in your codepen example the TweenMax url you are using goes to a 404 page and throwing an error in the console:

ReferenceError: TimelineMax is not defined
http://s.codepen.io/boomerang/3428400a79eca79ace1ad8f4c46fc2ac1440178726608/index.html
Line 30

In codepen if you go to the JS panel gear icon.. and then go to the JavaScript tab you will see a dropdown select menu.. click it, and choose TweenMax to auto-populate the TweenMax.js script from the CDN.

 

Resources:

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

W3C SVG display spec: http://www.w3.org/TR/SVG11/painting.html#DisplayProperty

GSAP set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

CSSPlugin autoAlpha: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Update:

I forgot you could also use the SVG visibility attribute but only on the following SVG elements:

• Graphics elements
  <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>
• Text content elements
  <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

Hope this helps!

[GreenSock]

I have run into that annoying glitch in Firefox too. No fun. Doesn't make sense that it'd throw such an error that gives no clue that it has to do with display:none. 

 

I don't think we can really add simple conditional logic to CSSPlugin that checks the "display" property because technically it could be ANY of the node's ancestors that are negatively affecting things. So that element may not have display:none, but it's grandparent does. See what I mean? Of course we could walk up the node list and check everything, but that'd be VERY costly performance-wise, and it'd have to run that logic for every SVG element...on every tick. Ouch. And everybody would pay that performance penalty even though 99%+ of the cases out there would never run into this error. See the problem? 

 

Unfortunately, I think the best thing we can do is just help people in the forums who run into this problem and rely on Google's crawlers to get searchers into these forums for the answer. If you've got any other suggestions, I'd love to hear 'em. 

 

By the way, Jonathan, great [thorough] answer. Love it. 

[thomasragger]

This bug apparently also applies to masks and other elemens in a <def> node because they are not drawn and are treated as invisible. Does anyone have an idea for a workaround?

[Jonathan]

CSS is not rendered directly on child elements of <def>, <symbol>, and <use> tags in SVG.

 

According to the SVG spec for those SVG elements.

 

<def>

• SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

You must animate the attributes instead of those elements inside <def>, and <symbol> tags. You can use the GSAP Attribute Plugin.

 

Here are some examples of animating SVG flters using the AttrPlugin.

• SVG Blur Glow Effect inside <def> tag:

  See the Pen pjOKxo by jonathan (@jonathan) on CodePen

• SVG Displacement and Turbulence:

  See the Pen NqZPwd by jonathan (@jonathan) on CodePen

• SVG Tint:

  See the Pen pJxRwG by jonathan (@jonathan) on CodePen

• SVG Hue Rotate:

  See the Pen MwPzox by jonathan (@jonathan) on CodePen

• SVG Gaussian Blur:

  See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

Resources:

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

SVG def tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

I hope this helps!