CSSPlugin holding a reference to a removed html element

vundev · March 1, 2017

Hm, nothing is wrong with the TweenMax, the preorder recursion doesn't work as expected, because of the wrong usage of hasOwnProperty. So here is the rewritten example. Another odd thing is that if destroyDisplayList is not called, the tweenLoolup map will keep a reference to the Slide object, otherwise not. So the question is how the pixijs display list affects TweenMax, it is very strange...If you can give me some explanation It would be great.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GASP memory leak</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
    <script src="http://pixijs.download/release/pixi.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        window.onload = function () {
            // starts rendering
            const renderer = PIXI.autoDetectRenderer(500, 500);
            $('canvas').append(renderer.view);
            renderer.backgroundColor = 0x000000;
            const stage = new PIXI.Container();
            animate()

            function animate() {
                renderer.render(stage);
                requestAnimationFrame(function () {
                    animate()
                });
            }

            // end

            // Define api here
            class Slide extends PIXI.Container {
                constructor(id) {
                    super()
                    this.id = id
                }
            }

            PIXI.DisplayObject.prototype.preorder = function (callback) {
                const length = this.children.length
                for (var i = 0; i < length; i++) {
                    if (typeof this.children[i].preorder == 'function')
                        this.children[i].preorder(callback)
                }
                callback(this)
            }

            // end

            const navigation = new PIXI.Container()
            const container = new PIXI.Container()
            const holder = new PIXI.Container()
            const slide = new Slide(555)
            stage.addChild(navigation)
            navigation.addChild(container)
            container.addChild(holder)
            holder.addChild(slide)

            navigation.name = 'nav'
            container.name = 'cont'
            holder.name = 'holder'
            slide.name = 'slide'

            function destroyDisplayList(){
                navigation.preorder(function (child) {
                    if (child instanceof PIXI.Sprite)
                        child.destroy(false, false);
                    else child.destroy();
                });
            }

            setTimeout(function () {
                stage.removeChild(navigation);
                TweenMax.killTweensOf(holder);
                destroyDisplayList()
            }, 500)


        }
    </script>
</head>
<body>
<canvas></canvas>
</body>
</html>

GreenSock · March 2, 2017

I'm not quite sure how to answer your question; GSAP has absolutely no external dependencies and there's nothing it does to PIXI and I'm pretty confident that PIXI doesn't do anything to GSAP. I have this sneaking suspicion that I misunderstood your question though. Could you maybe rephrase it and be very specific about a GSAP question for us?

Carl · August 23, 2018

anotheruser, i see you created a duplicate post:

probably best to keep your issue separate. Please provide a demo that we can look at in that thread thank you.

Notifications

Messages

CSSPlugin holding a reference to a removed html element

Warning: Please note

Recommended Posts

vundev

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

Recently Browsing 0 members