setVisible not working for DOM elements in a container

[prakol16]

Version

• Phaser Version: 3.55.2

• Operating system: Ubuntu

• Browser: Tested on Chrome and Firefox

Description

It seems like the fix in #4486 is no longer working. When the visibility of the parent container is changed, the DOM node is still visible. I am able to determine that it is because preUpdate is not being called on DOM elements, though I am not sure why.

Example Test Code

class MainScene extends Phaser.Scene {
    create() {
        const text = new Phaser.GameObjects.DOMElement(this, 0, 0, "span", { color: "white" }, "Hello");
        const container = this.add.container(50, 50, [text]);
        this.time.delayedCall(1000, () => {
            console.log("Setting container visibility to false");
            container.setVisible(false);
            // If we forcefully call preupdate on the next update
            // then the text correctly disappears
            // this.events.once("update", () => {
            //     text.preUpdate();
            // });
        });
    }
}

See a demo: https://codepen.io/prakol16/pen/rNwVyvv

Additional Information

In addition, perhaps the preUpdate code should be moved to a preStep event on the game. The reason for this is because if a scene is paused, the visibility of various objects can still change, but preUpdate will never be called. Similarly, if the container/its children are changed to be inactive with setActive(false), we'd expect the visibility to still be controlled separately by setVisible, but instead, the visibility of the DOM element will no longer change.

[samme]

It still works, use

const text = this.add.dom(0, 0, "span", { color: "white" }, "Hello");

[samme]

It doesn't work, in fact. 😄

[prakol16]

The more general issue is #5817. In fact sprite animations, (more generally, anything with preUpdate) don't work in containers either, except in certain circumstances. Maybe this issue should be closed in favor of that one?

[samme]

Well, this still works:

const text = this.add.dom(0, 0, "span", { color: "white" }, "Hello");

this.add.container(0, 0, [text]).setVisible(false);
// `text` will also be invisible

I agree that this issue would be better addressed without preUpdate() though, so I would keep it open.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.