Jump to content
GreenSock

Payman

ownerSVGElement is null 

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

I can't create a codepan as I don't understand why it's happening but firefox spits errors ownerSVGElement is null for some dynamically generated inline svgs, I can get all the parents of svg using jquery .parents(), but this thing is always null. Old versions don't have this issue, can you guys make some sort check if it is null - avoid using it? Really desperately need this fix.

Link to comment
Share on other sites

Hm, any chance you could provide something that shows this problem, even if it's not a codepen? It's just super hard to troubleshoot blind. 

 

FYI, one of the reasons we added some code that references ownerSVGElement is to work around Firefox bugs in fact. Again, it'd be amazingly helpful if we had something to test against. I haven't heard of anyone else reporting an issue like this, so I'm kinda grasping at straws here. I'd definitely like to get it fixed, though. 

  • Like 2
Link to comment
Share on other sites

Hello @Payman

 

Yes I agree, a very reduced limited codepen example showing what your seeing, since it will be impossible to replicate this without knowing how to replicate this with the exact dynamic SVG code your trying to animate.

 

And when you say old versions, what do you mean, old versions of jQuery, since i didnt read anything on exactly what in the GSAP API your having an issue with. But only a mention of you using jQuery.parents().

 

That looks like this is happening due to the browser thinking the SVG element has no parent. That would throw that ownerSVGElement is null error, especially if the outermost SVG doesn't exist yet or is not part of the render tree. That is why it throws null. You could try and add a setTimeout() or use GSAP delayedCall() to try and get ownerSVGElement after 300ms-500ms and see if ownerSVGElement returns an element and not null. (Giving time for your dynamic inline SVG to be inserted in the DOM)

 

Firefox has several bugs for this, but we wont know without testing live in the browser with the code your seeing this with.

 

But a codepen example will help us replicate this, which is the only way to resolve this, so we have some context to test what your seeing.

 

 

:)

 

 

  • Like 2
Link to comment
Share on other sites

Quote

That looks like this is happening due to the browser thinking the SVG element has no parent. 

See for yourself, there is a parent and it's inside of the HTMLDocument. Do you have any other ideas what that could be?

Screen Shot 2017-08-04 at 1.02.46 PM.png

Link to comment
Share on other sites

The fix is really easy guys. If the issue is possible in a heavy application, because firefox is not very reliable, I don't see why wouldn't you implement it :

var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),


 

Link to comment
Share on other sites

Oh, I know it'd be easy to dump in a band-aid fix like that - I was just trying to understand the context first so that I know for sure that this is the most appropriate thing to do. I've never heard of anyone running into this before, so I'm very curious and that's why I asked for a reduced test case. A screen shot doesn't help much at all unfortunately. We really need to see the actual code in context of where the error is being thrown. 

 

I'm a bit concerned that perhaps you've got malformed SVG code. I could be wrong, of course - I just noticed that in your screen shot, the outerHTML shows <svg></rect></g> which is invalid. Maybe that's the problem? 

 

Again, my goal here isn't just to throw a band-aid fix into the codebase. I prefer to really understand what's going on and why before I alter the codebase. Can you please provide a reduced test case in a codepen or jsfiddle? Is there any particular reason you're so reluctant to provide that? You don't even have to use your "real" artwork or code - it can be completely fictitious if you're worried about confidentiality or something. As long as it reproduces the problem, that's all we need.

  • Like 2
Link to comment
Share on other sites

Quote

I'm a bit concerned that perhaps you've got malformed SVG code. I could be wrong, of course - I just noticed that in your screen shot, the outerHTML shows <svg></rect></g> which is invalid. Maybe that's the problem? 

That's just the way firefox shortens it, you can see "..." in the middle. The svg is valid.

Quote

Again, my goal here isn't just to throw a band-aid fix into the codebase. I prefer to really understand what's going on and why before I alter the codebase. Can you please provide a reduced test case in a codepen or jsfiddle? Is there any particular reason you're so reluctant to provide that? You don't even have to use your "real" artwork or code - it can be completely fictitious if you're worried about confidentiality or something. As long as it reproduces the problem, that's all we need.

Ok, no worries, we will just use a modified version. I spent hours trying to create a reduced version, but no luck. This issue appears only in a fully fledged huge application, which I can not disclose. The troubling code itself is extremely simple and similar to this -

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

 There is just a delay that appears after inserting an SVG and e.getBBox() becomes available, so TweenMax falls-back to using always null ownerSVGElement. And as more stuff happens on the page, more this delay, so I can't even predict how big of a delay I should use. Sometimes it goes up to several seconds for some reason, which is not acceptable for smooth animations.  Again I won't bug you anymore with this, since I can't be helpful with replicating the issue. Thank you for you help anyways!

 

Link to comment
Share on other sites

Okay, well thanks for trying anyway. I did notice a few problems with that codepen: 

  • You're using the "/latest/" CDN URL which hasn't been supported in years. You should switch to /1.20.2/. 
  • You're using the same ID on multiple elements. 

If you're ever able to reproduce the problem, please do let us know. I'd love to see what's going on under the hood. Cheers!

Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Okay, well thanks for trying anyway. I did notice a few problems with that codepen: 

  • You're using the "/latest/" CDN URL which hasn't been supported in years. You should switch to /1.20.2/. 
  • You're using the same ID on multiple elements. 

If you're ever able to reproduce the problem, please do let us know. I'd love to see what's going on under the hood. Cheers!

This is your  Basic Starter Pen, I did not change any external javascript urls, so you might need to tweak it.

 

Link to comment
Share on other sites

Thanks! I just updated it ;)

Link to comment
Share on other sites

7 hours ago, Payman said:

There is just a delay that appears after inserting an SVG and e.getBBox() becomes available, so TweenMax falls-back to using always null ownerSVGElement.

 

That doesn't make any sense. JavaScript is completely synchronous, and so is inserting an svg like you're doing. And the ownerSVGElement is supposed to be null on an svg element that is not inside another svg. It has nothing to do with being inside an HTML element. 

 

That error clearly shows it's a root svg element, so the question is why is getBBox being called on it? But I don't know enough about how the CSSPlugin works to answer that.

Link to comment
Share on other sites

Quote

That doesn't make any sense. JavaScript is completely synchronous, and so is inserting an svg like you're doing. And the ownerSVGElement is supposed to be null on an svg element that is not inside another svg. It has nothing to do with being inside an HTML element. 

I don't think issue happens because of javascript, most likely it is the repaints and layout recalculations delay.

Quote

That error clearly shows it's a root svg element, so the question is why is getBBox being called on it? But I don't know enough about how the CSSPlugin works to answer that.

I agree, doesn't make sense for me either why gsap decided to getBBox on a root element, I will take a deeper look into it, thanks for advice!

Link to comment
Share on other sites

Here is what I see so far:

1) TweenMax tries to parse transforms _getTransform

2) It checks whether it is SVG or not using _isSVG function

3) This is the code of this function, you can see it tries to use getBBox even though it might be a root svg element:

return !!(_SVGElement && e.getCTM && _getBBox(e) && (!e.parentNode || e.ownerSVGElement))

4) This results in triggering e.getBBox(), which ... fails! So it now goes to the _getBBoxHack and uses "this.ownerSVGElement" which is null and  should not be used

Here is the error of  getBBox (note that svg does NOT have any "display:none;" style and svg .is(':visible') is true)

 

1.png

 

After a quick googling I saw people getting this bbox error after inserting svg via ajax, so that's might be a root of the problem, I will check it later. Anyways I feel like _isSVG function's way of doing things looks pretty questionable to me. Let me know your thoughts! 

 

PS. Could you explain to me the meaning of this code? Thx! And why do you need to check getCTM twice in a row?:

_SVGElement && e.getCTM

 

Link to comment
Share on other sites

Finally, I figured out what is going on. Here is the codepan - 

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

 

Basically I am building a scene with dynamically loaded SVGs in a hidden div and then reveal the scene to  a user. Apparently firefox fails to provide BBox from the hidden div. GSAP on the other hand mistakenly trying to get a BBox on a root SVG element when there is no need for it at all (I think).

  • Like 1
Link to comment
Share on other sites

6 hours ago, GreenSock said:

Thanks for the additional information, @Payman - I believe I've got it patched 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. Does that work better for you? 

Great job, everything works perfect now!

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