Jump to content
GreenSock

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

.createElementNS style property is undefined (old GSAP version)

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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Yep, I see the same thing. Ha. Yeah, that certainly seems like an incorrect namespace.

Share this post


Link to post
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.
},

 

Share this post


Link to post
Share on other sites

Thanks for the suggestions, @RolandSoos. I do plan to make some similar changes in the next release. 👍

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×