Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
daviddelusenet

Set className throws error 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

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.

Share this post


Link to post
Share on other sites

It kinda sounds like you're trying to animate the class of an SVG element that isn't in the DOM (yet) maybe? Totally guessing here - I'd echo Carl's encouragement to create a reduced test case in Codepen :) 

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

GSAP uses the class attribute, so it's most likely what Jack said. Seeing display: "block" probably means it's set to display: "none", which removes an element from the rendering tree, creating errors for SVG elements in Firefox.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I stand corrected Good Sir :)

Share this post


Link to post
Share on other sites

I didn't know that until you brought it up. I looked in the source code and saw this...

var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements;
  • Like 1

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Tough to know what's going on without a demo. Once @daviddelusenet provides one, I'm sure we'll get it figured out in no time :) 

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×