Jump to content
Search Community

Set className throws error in Firefox

daviddelusenet 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 all,

 

Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina).

 

This is the code that causes the error:

this.tl
    .set(this.modalBackground, {
      display: "block",
      className: "+=" + this.modalBackgroundModClass
     })

The classname line causes the following error in Firefox:

TypeError: this.ownerSVGElement is null

This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this:

this.tl
    .set(this.modalBackground, {
      display: "block",
      onComplete: function () {
        this.modalBackground.classList.add(this.modalBackgroundModClass);
      }.bind(this)
     })

But I would like to use the className way. Any idea on what is going wrong?

 

Thanks in advance.

Link to comment
Share on other sites

Hello,

 

Something interesting i found, according to the SVG spec.. found here:

 

https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement

 

The SVG className property is deprecated and will be removed from the SVG spec soon. But the spec advises to use classList instead, maybe that is why classList works in Firefox in your example above on the SVG / Svg child element.

 

And by className I mean the SVG className property, not the GSAP CSSPlugin className property.

 

See SVG Basic Data Types spec:

 

The className IDL attribute reflects the ‘class’ attribute.

  • This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use Element.classList instead.
  • The className attribute on SVGElement overrides the correspond attribute on Element, following the WebIDL rules for inheritance.

Firefox is great about following the spec, so since the SVG className property is deprecated. Firefox probably removed it from their browser so maybe that is why it is null, since the element is the outermost svg element?

 

I was having a hard time viewing the DOM properties in Firefox dev tools in codepen. Chrome allowed me though.

 

So either its due to the SVG className property being deprecated in the spec and Firefox already removed it, so you have to use classList instead for the SVG element. Or the element within your <svg> is not an SVG element type.

 

But don't mind me, like Carl and Jack advised a codepen demo is the way to go so we see your code in context to test it live:

 

 

Just my two bits :)

  • Like 1
Link to comment
Share on other sites

I was thinking the same thing Blake was but in that case Firefox will throw a NS_ERROR_FAILURE error when trying to do something on an svg element or SVG child element that has display none, making it not be part of the rendering tree.

 

I was wondering if GSAP CSSPlugin in the source is using the className property to change or set classes instead of classList property. Firefox is usually the first to honor the spec, the SVG spec in this regard.

 

But this error is different, maybe due to targeting a non SVG child element or the possible use of the now depricated SVG className property instead of using classList property inside the CSSPlugin. Since the error ownerSVGElement is null. You know Firefox they follow the spec on the to the letter, But I could be dead wrong like a zombie.

 

But let's see what the great ones Jack and Carl can find once we see a codepen daviddelusenet :)

  • Like 2
Link to comment
Share on other sites

Oh yeah, you're probably right about the error being NS_ERROR_FAILURE. I forgot about that. It just sounded similar.

 

What I was saying is that GSAP uses the class attribute, .getAttribute("class") .setAttribute("class", ""), so it shouldn't be an issue with classList.

  • Like 2
Link to comment
Share on other sites

That would make sense since className is deprecated in Firefox.. I wonder what other browsers have deprecated it?

 

Then that leaves a possible non svg element within the main <svg> element that could throw that this.ownerSVGElement is null error?

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