Jump to content
Search Community

.createElementNS style property is undefined (old GSAP version)

RolandSoos 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

We do not use the latest GSAP in our stable software. We use version 2.0.2. Several of our users reported that there is a JavaScript error in our application.

The error was: TypeError: Cannot set property 'transformOrigin' of undefined

 

We narrowed the problem to this:

var Ja = O.documentElement || {},
    Ka = function () {
        var a, b, c, d = p || /Android/i.test(T) && !_gsScope.chrome;
        return O.createElementNS && !d && (a = Ia("svg", Ja), b = Ia("rect", a, {
            width: 100,
            height: 50,
            x: 100
        }), c = b.getBoundingClientRect().width, b.style[Ea] = "50% 50%", b.style[Ca] = "scaleX(0.5)", d = c === b.getBoundingClientRect().width && !(n && Fa), Ja.removeChild(a)), d
    }()

 

I was able to find a GitHub ticket which probably related to this issue: https://github.com/greensock/GreenSock-JS/issues/288

 

@GreenSock So my real question is, that were you able to find why this issue happens on one website and why not on others? Do you know the real cause what goes wrong when you use .createElementNS why the style property is not accessible? If we would know, the we could reproduce the issue on our local test sites and we could verify if the latest GSAP works fine in that environment.

Link to comment
Share on other sites

It seemed like a browser (or other environment) bug where [only in that particular environment] createElementNS() produced an element whose "style" was completely inaccessible! Weird, right? I can't imagine it's related to GSAP in any way. 

 

Is there a reason you don't want to update to the latest GSAP? Just curious. 

Link to comment
Share on other sites

Thanks, yeah it is weird. We use this version since a year and it was the third time in this month when we saw this error. (All of them were different WordPress or Joomla site.) Might be a Chrome only bug? If we would be able to find the cause, we might be able to report it to their developers.

 

Several times in the past I experienced new "bugs" when I updated to newer version. Well, they were not bugs exactly, but what worked in the last version might produce error in the next :) It is not GSAP fault! I think the cause is that GSAP allows you to do a lot of things, even advanced, not documented things and 60fps and our eye might hinder bugs what we should see. When you you are dancing on the border bugs might happen.

 

So, it takes several days of testing before I can safely upgrade GSAP (and under safely, I mean 90%, As I think you know it is really hard to test animations in the async environment (dropping framerate might cause bugs, etc...)). If I push out an update, that affects thousands of website in the first 24 hour, so the my responsibility is very high. Better to be safe than sorry.

Link to comment
Share on other sites

7 minutes ago, RolandSoos said:

So, it takes several days of testing before I can safely upgrade GSAP (and under safely, I mean 90%, As I think you know it is really hard to test animations in the async environment (dropping framerate might cause bugs, etc...)). If I push out an update, that affects thousands of website in the first 24 hour, so the my responsibility is very high. Better to be safe than sorry.

Yeah, I totally get that. Makes sense. Hey, if GSAP 2.0.2 is working well for you and there really aren't any pain points, why risk the upgrade? I did put a fix in for the issue we're discussing here, so it may very well be worth the risk in this case. 

 

Let me know if there's anything else we can do. Happy tweening!

  • Like 1
Link to comment
Share on other sites

8 hours ago, RolandSoos said:

I was able to find a GitHub ticket which probably related to this issue: https://github.com/greensock/GreenSock-JS/issues/288

 

I think that issue is related to the environment, which is designed for mobile games. I'm not familiar with the environment in that issue, but I've used several like it in the past, and DOM functionality is very limited. You're basically limited to canvas support.

 

Do you know what browsers are causing this error. A quick search brought up this issue for Servo, which is an experimental browser.

https://github.com/servo/servo/issues/14779

 

  • Like 1
Link to comment
Share on other sites

Well, I think I found something. 

Look: https://jsfiddle.net/wk3nyu8m/1/

 

For me in Chrome and Firefox there is the error in the console. The .style property is undefined (Do you see the same?)

 

Then look at this: https://jsfiddle.net/wk3nyu8m/2/

It works for me just fine. 

 

Do you see the difference? https:// vs http:// in the namespace. The proper is http:// but on these servers, the server rewrote the http:// in the JS files to https:// (Might be a hosting provider setting...) 

 

Update:

Yeah, this was the cause for both of our users. One was a Joomla and two was WordPress and they were nginx server.

Link to comment
Share on other sites

@GreenSock, I just checked the latest version (2.1.3) and I have some suggestions.

 

In the CSS plugin:

_createSVG = function (type, container, attributes) {
  var element = _doc.createElementNS("http://www.w3.org/2000/svg", type),
      reg = /([a-z])([A-Z])/g,
      p;
  for (p in attributes) {
    element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
  }
  container.appendChild(element);
  return element;
},

It should be:

_createSVG = function (type, container, attributes) {
  var element = _createElement(type, "http://www.w3.org/2000/svg"),
      reg = /([a-z])([A-Z])/g,
      p;
  for (p in attributes) {
    element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
  }
  container.appendChild(element);
  return element;
},

 

and the _createElement:

_createElement = function (type, ns) {
  var e = _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type);
  return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
},

could be (if we presume, that this was the cause for others) :

_createElement = function (type, ns) {
  return _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, 'http'), type) : _doc.createElement(type); //Rarely servers replace the http:// into https:// which is not a proper namespace so we have to fix that.
},

 

Link to comment
Share on other sites

As a sidenote to this story: All users who had this issue host their site at SiteGround. We contacted with the hosting provider and it turned out that they have an option Site Tools -> External Links Rewrite which rewrites urls in JavaScript files too. Site owners  just need to switch it off and everything should work fine. They promised that they will try to fix these false replacements.

  • Thanks 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.
×
×
  • Create New...