Error initializing CSSPlugin

marcolink commented 5 years ago

Description

While developing a playable ad for the provider https://www.applovin.com/, i stumbled upon an initialization error in gsap (CSSPlugin). First of all, this might be a pretty special case because of the requirements for playable ads:

everything has to be inlined in a single html file
no external calls allowed

In my special case, we only use gsap in combination with http://www.pixijs.com.

How to reproduce:

open https://p.applov.in/playablePreview?create=1
paste in gsap_test.html (0.0.1)
As a result you will not see any animation running in the simulator.
Developer Console outputs an error
```
Uncaught TypeError: Cannot set property 'cssText' of undefined
```
The Problem:

CSSPlugin tries to inititalize some properties for later use (eg.: _supportsOpacity). During this phase test html nodes are created which don't have the properties it tries to access. This results in an Uncaught TypeError.

How to fix it:

In my setup (only tweening pixi.js objects) i actually don't need the CSSPlugin. Suppressing CSSPlugin initialization solves the problem here.

To reproduce:

open https://p.applov.in/playablePreview?create=1
paste in gsap_test.html(0.0.2)
As a result you should see the animation running in the simulator.

I know this is related to the way how the ad (html file) is loaded and displayed. But since playable ads are a rising star, and gsap a perfect match for development, it would be nice to find a more general solution for this problem. If i have missed a way to globally switch of CSSPlugin or another more convenient way to solve the problem, please let me know.

jackdoyle commented 5 years ago

Interesting - it looks like this is actually related to createElementNS(), not createElement(). Even if you feed in the proper namespace for HTML, "http://www.w3.org/1999/xhtml", it's refusing to allow access to the "style" property of the resulting element in your particular environment. Even if you query document.body.namespaceURI (which is the same in my test), it breaks. I'm not sure exactly what's unique about that environment that's causing the anomaly but I can tweak the next release of CSSPlugin to use createElement() by default instead of createElementNS() which appears to get around this issue. Thanks for reporting this, and especially for providing such detailed instructions about how to reproduce it (along with test files). [high-five]

In the mean time, a potential workaround (aside from not loading CSSPlugin, as you opted for) is to add this BEFORE loading CSSPugin:

var _createElementNS = document.createElementNS;
document.createElementNS = function(ns, type) {
    return (ns && ns !== "http://www.w3.org/1999/xhtml") ? _createElementNS.apply(document, arguments) : document.createElement(type);
};

Happy tweening!

marcolink commented 5 years ago

Thanks for the fast and details reply!

For now the little patch you provided does the trick ;)

Let me know if you need further test cases to cover this case in your next release.

greensock / GSAP