pixijs: Nested masked objects break when going outside viewport (in certain conditions)

The included playground demo explains it best, but to sum it up, when the following conditions are true, the mask on container C will be disabled when it moves out of the viewport:

scissor masking is enabled
masked container © is a child of a masked object (P)
the parent container (P) contains at least one other object

This feels somewhat similar to #5974 (which was fixed a long time ago) but is obviously not exactly the same case.

Expected Behavior

Mask will never disable

Current Behavior

Mask disables when object leaves viewport

Possible Solution

Disable scissor masking

Steps to Reproduce

https://www.pixiplayground.com/#/edit/2qJVNoyRHDVPMtaTJ4hCY

Environment

pixi.js version: 6.0.0 and up
Browser & Version: Tested in Windows 10 on FF, Chrome, and Edge, all have the same issue
Running Example: https://www.pixiplayground.com/#/edit/2qJVNoyRHDVPMtaTJ4hCY

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 33 (10 by maintainers)

Commits related to this issue

Hot path for flipping scissors in chrome Negative values not allowed and scissor state reset. Partial fix: #7855 — committed to eXponenta/pixi.js by eXponenta 3 years ago
better detection of scissor rect, takes into account its area, #7855 — committed to pixijs/pixijs by ivanpopelyshev 3 years ago

Most upvoted comments

yes, that’s the difference. double-destroy works in v4.5 but not in v4.8

Suppose you called sprite.destroy() (important: NO PARAMS) , two times. v4.5 works fine, v4.8 breaks because of this line: https://github.com/pixijs/pixijs/blob/fc2248c5df12cf2273ddafdccbe6eb19c33b73eb/src/core/sprites/Sprite.js#L441

v6 should break same way. I advice you to override destroy, because that’s completely different topic of discussion and will take long time to negotiate with others (whether this behaviour is ok)

let containerDestroy = PIXI.Container.prototype.destroy;
PIXI.Sprite.prototype.destroy = function(options) {
        containerDestroy.call(this, options);

        this.shader = null;
        this._anchor = null;
        
        if (!this._texture) {
            return;
        }

        this._texture.off('update', this._onTextureUpdate, this);

        const destroyTexture = typeof options === 'boolean' ? options : options && options.texture;

        if (destroyTexture)
        {
            const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture;

            this._texture.destroy(!!destroyBaseTexture);
        }
        this._texture = null;
    }

ivanpopelyshev on Oct 19, 2021

so its something like double-destroy, that worked in 4.5.3 but not working in 4.8.9, let me try

ivanpopelyshev on Oct 19, 2021