Jump to content
GreenSock

TartufoDAlba

"this.ownersvgelement is null" in FireFox

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

Please check codepen example in FF.

 

I was able to isolate the issue. Where if the SVG element is set to "display: none" it will throw an error. (i guess because it doesn't exist in the DOM)

The issue is i have 10 of these arrows on another page. And 9 of them are set to "display: none". Then later in the scene they will begin to show.

 

Is there any kind of work around in FireFox to fix this?

See the Pen jLyavG by tartufodalba (@tartufodalba) on CodePen

Link to comment
Share on other sites

Could you use visibility:hidden, opacity:0 or autoAlpha:0?

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

3 minutes ago, PointC said:

Could you use visibility:hidden, opacity:0 or autoAlpha:0?

 

Happy tweening.

:)

 

The issue is is that the physical arrow is inside a larger div that is set to display: none. (i just tried to make the minimal version for an example)

 

I guess I could always call that effect as each arrow appears also. Just wondering if there may be a quicker/simpler solution.

 

 

Link to comment
Share on other sites

Yeah, Firefox has some odd quirks in cases like this. We've already worked around a bunch of them in GSAP, and I just added another in the upcoming 1.20.3 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - that seems to work great in your demo. Let me know if it looks good to you as well please. 

  • Like 4
Link to comment
Share on other sites

Hello @TartufoDAlba

 

You should be using CSS visibility: hidden or the SVG visible attribute to hide your elements, since when an SVG child element has display none it is removed from the render tree, and will throw that error.

 

Previously Firefox would throw a NS_Error_Failure error. But opted to match other browsers like Chrome and MS Edge., and throw null for ownerSVGElement. 

 

See this Mozilla bug report regarding why Firefox throws null instead of NS_Error_Failure for ownerSVGElement.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=835048

 

:)

  • Like 2
Link to comment
Share on other sites

9 hours ago, GreenSock said:

Yeah, Firefox has some odd quirks in cases like this. We've already worked around a bunch of them in GSAP, and I just added another in the upcoming 1.20.3 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - that seems to work great in your demo. Let me know if it looks good to you as well please. 

Hi, I tested it and it works perfectly. Great to see that issue was solved.

 

Thanks!

 

4 hours ago, Jonathan said:

Hello @TartufoDAlba

 

You should be using CSS visibility: hidden or the SVG visible attribute to hide your elements, since when an SVG child element has display none it is removed from the render tree, and will throw that error.

 

Previously Firefox would throw a NS_Error_Failure error. But opted to match other browsers like Chrome and MS Edge., and throw null for ownerSVGElement. 

 

See this Mozilla bug report regarding why Firefox throws null instead of NS_Error_Failure for ownerSVGElement.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=835048

 

:)

 

Based on spacing issues of how it would still show the spacing with "visibility: hidden", the parent divs of these SVGs really do have to be "display: none". I will keep in mind the rest though. Thanks!

 

Link to comment
Share on other sites

When i say SVG elements, i mean the children of the <svg> element.. for example <rect>, <circle>, <g>, etc..

 

The parent of the <svg> element (which could be a DOM element like a <div>) and the main <svg> parent itself can use display: none, just not those SVG child elements within the <svg> element. Those shouldn't use display:none due to the way display and visibility works with <svg> children, making them be removed from the render tree based on the SVG spec display.

 

Happy Tweening :)

Link to comment
Share on other sites

12 minutes ago, Jonathan said:

When i say SVG elements, i mean the children of the <svg> element.. for example <rect>, <circle>, <g>, etc..

 

The parent of the <svg> element (which could be a DOM element like a <div>) and the main <svg> parent itself can use display: none, just not those SVG child elements within the <svg> element. Those shouldn't use display:none due to the way display and visibility works with <svg> children, making them be removed from the render tree based on the SVG spec display.

 

Happy Tweening :)

 

I had made another pen for FF, just to be sure I understood. It still seems that even when the parent has the "display: none" and the SVG does not, it still does not function properly (In FF). 

 

But I also may have mis-understood the explanation... so i provided the pen just in case.

 

 

See the Pen jLBbPq by tartufodalba (@tartufodalba) on CodePen

 

 

 

Link to comment
Share on other sites

It looks like the spec includes the <svg> element and its children to not render in the tree when they have display none. In this case its inheriting display none from the parent div. So that triggers it not to not render directly. Then bam, boom, battabing that error gets thrown.

 

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

 

Quote

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 your best bet is to use a CSS rule with visibility:hidden, width:0 and height:0 then it should render like you want, so it doesn't leave a gap due to just using visibility:hidden by itself.

 

.hide {
  visibility:hidden;
  height:0;
  width:0;
}

 

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

 

:)

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