Error initializing CSSPlugin #288
Comments
|
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! |
|
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. |
jackdoyle
pushed a commit
that referenced
this issue
Feb 18, 2019
- NEW: get rich, organic staggers that are spaced according to any ease and/or proximity to a position. For example, you can have things emanate outward from the "center" or a certain index. It'll even accommodate grids, complete with auto-calculated columns and rows (great for responsive layouts)! These work in all of the stagger methods like staggerTo(), staggerFrom(), and staggerFromTo() on TweenMax and TimelineLite/Max. Interactive example: https://codepen.io/GreenSock/full/jdawKx - NEW: MorphSVGPlugin recognizes a new type:"rotational" special property that completely eliminates kinks that occasionally occur between two smooth anchors, mid-tween. See https://codepen.io/GreenSock/full/2e907cfa0fd05ca534ddd3592d73b9c2/ for a demo. You can also set MorphSVGPlugin.defaultType = "rotational" to change the default (from "linear"). - NEW: MorphSVGPlugin's new type:"rotational" feature recognizes an "origin" property, as demonstrated here: https://codepen.io/GreenSock/full/vvjOGq and there's a findMorphOrigin() utility function that helps you experiment with origin placement: https://codepen.io/GreenSock/pen/5e05b5ddaab75e7b5ce135396a8dc4df?editors=0010 - NEW: MorphSVGPlugin can be used to draw morphing shapes directly to <canvas> now, using the "render" special property (or MorphSVGPlugin.defaultRender for the default). See https://codepen.io/GreenSock/pen/WYWZab?editors=0010 - NEW: MorphSVGPlugin has 2 new static methods: stringToRawPath() and rawPathToString() for converting between SVG path data strings and RawPath arrays. - NEW: you can define an activeCursor for Draggable that's only in effect between pressing and releasing. So, for example, {cursor:"grab", activeCursor:"grabbing"}. Or you can set cursor:false now to prevent the cursor from changing on rollover. - NEW: added the ability to define a custom "tag" in SplitText (by default it's "div"). - NEW: added basic support for px-based inset() clip-path animation in CSSPlugin. - NEW: ScrambleTextPlugin recognizes emoji characters - IMPROVED: MorphSVGPlugin has a more optimized algorithm for selecting shapeIndexes on complex shapes that aren't filled with fill-rule:nonzero, so you'll see less flipping of shapes when there are multiple segments - IMPROVED: function-based "cycle" values in the stagger methods now receive a 3rd parameter which is the entire "targets" array (or NodeList). This makes it possible for even more advanced effects. - IMPROVED: Added the preset-env to the "browserify" configuration of the package.json (see #280). - IMPROVED: ScrambleTextPlugin now trims the extra white space from the very start and end of the text values (unless you set trim:false). - IMPROVED: Draggable's dragClickables is true by default now (previously it was false, but a change in React 16.5.x made it more pressing to switch the default behavior to avoid confusion). See facebook/react#13654 (comment) - IMPROVED: Added /* eslint-disable */ to files to prevent linting hassles - IMPROVED: when animating complex strings, numeric values are limited to 3 decimal places to improve performance and reduce memory consumption. - IMPROVED: if you set the animation of a GSDevTools instance to a repeating animation and globalSync:false, it'll automatically enable "loop" on the GSDevTools instance. - IMPROVED: TimelineLite/Max.set() consistently has its immediateRender default to false now. Previously, it would default to true only if the position was the current time (typically at the beginning). If this breaks any of your code, the soution is to simply add immediateRender:true to any set() calls that are at the very beginning of a timeline. - FIXED: if you declare a liveSnap on a Draggable instance as an array (like liveSnap:[0,90,180]), it would always snap to the first value. - FIXED: ScrollToPlugin now works with relative values like "+=600" - FIXED: ScrambleTextPlugin tweens of multiple targets that didn't have any "text" defined would use the text from the first target instead of the original text from each target. That's resolved now. - FIXED: In iOS 9 Safari, an error could be thrown in Draggable for the passive flag in addEventListener(). - FIXED: Missing dependencies Power2, Power3, Linear, and AttrPlugin in the ES6 GSDevTools module - FIXED: ThrowPropsPlugin doesn't throw an error in windowless environments now. - FIXED: worked around a bug in Microsoft Edge that could throw an error when getComputedStyle is called without a specific scope, like window.getComputedStyle(). - FIXED: worked around an issue in very uncommon environments that could cause an error due to createElementNS() not allowing access to the resulting element's "style" property. See #288 - FIXED: if you had a set() at the very beginning of a timeline that was paused before calling set(), and that timeline had a fromTo() or from() after that set(), and both dealt with transforms, the set() may act as if it's ignored. VERY rare. :) See https://greensock.com/forums/topic/19549-transform-origin-updated-only-once/ - FIXED: if you set the "z" component of a transformOrigin to a non-zero value (through GSAP), and then tried to set it BACK to zero, it failed. - FIXED: if a tween has immediateRender:true and invalidate() is called on it when its time is non-zero, it would render at a time of zero. Not anymore - it'll render at the current time. - FIXED: upon resuming a timeline that was paused with an addPause() after a drop in the frame rate, it could seem to jump ahead slightly. That's fixed now. - FIXED: if you target a root <svg> element with a Draggable and set bounds to another element and transform-origin isn't "left top", the bounds could be calculated incorrectly. - FIXED: a callback from a zero-duration tween might get fired twice in an extremely rare situation (if the parent timeline's playhead shot past it, and then moved back on top of it but due to computer rounding errors it rendered at an extremely small negative value). Not anymore. - FIXED: if you place a zero-duration animation/callback in a timeline and then alter its position (startTime) after it has rendered, and then restart the timeline (or move the playhead backward) it may not render properly the second time through. - FIXED: if you use TimelineLite/Max.paused() method without any parameters when the timeline is paused EXACTLY on top of an addPause() pause, it could cause the pause to behave oddly the next time through. - FIXED: if a Draggable element was inside a position:fixed parent, the origin of rotation could be miscalculated - FIXED: the onComplete of an animation that's shorter than 2 seconds might fire again inadvertently if GSDevTools was loaded. - FIXED: if you try animating any transform-related values of an element that has CSS rule-based transforms applied and whose decendent has display:none (thus the element is out of the document flow), the browser mis-reports the existing transforms. CSSPlugin now works around that scenario. - FIXED: if a Draggable is applied to an SVG that's nested inside a transformed (scaled) element that's further outside of its offsetParent, the Draggable element may not follow the mouse properly (too faster or too slow, depending on the scale). - FIXED: if a function-based value was defined for transform-related CSS values, some of the functions may get called twice. Not anymore.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:In my special case, we only use
gsapin combination with http://www.pixijs.com.How to reproduce:
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 anUncaught 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:
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.
The text was updated successfully, but these errors were encountered: