Canvas Spine objects do not respect camera zoom when inside a scaled container

[FostUK]

• Phaser Version: 3.24 (but also tested locally with 3.53.1)
• Operating system: Any
• Browser: All

Description

Spine objects do not respect camera zoom when running in canvas mode if inside a scaled container.

Example Test Code

Webgl: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half

Canvas: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook-kindle?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half

On initial page, watch the clock and fishbowl but also more obvious on later pages where the girl character does not scale with zooms.

Tried to make a sandbox but it doesn't seem to save - if you go here: https://labs.phaser.io/edit.html?src=src/spine/add%20spine%20object%20to%20group.js&v=3.53.1

and replace the code with:

let spineboy
let container

class Example extends Phaser.Scene
{
    constructor ()
    {
        super({
            pack: {
                files: [
                    { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/3.8.95/SpinePluginDebug.js', sceneKey: 'spine' }
                ]
            }
        });
    }

    preload ()
    {
        this.load.image('logo', 'assets/sprites/phaser.png');
        this.load.setPath('assets/spine/3.8/demos/');
        this.load.spine('set1', 'demos.json', [ 'atlas1.atlas' ], true);
    }

    create ()
    {
        this.add.image(0, 0, 'logo').setOrigin(0);
        container = this.add.container()
        spineboy = this.add.spine(400, 600, 'set1.spineboy', 'idle', true);
        container.add(spineboy)

        container.setScale(0.5)
    }

    update(time, delta)
    {
        this.cameras.main.setZoom(Math.sin(time / 1000));
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    scene: Example
};

const game = new Phaser.Game(config);

You can see how, compared to the background image, it seems to double the zoom effect. Ignore the missing parts - that's just spine meshes not working in canvas and is expected. If you flick between WEBGL and CANVAS you can see the scale mismatch.

[thanonup]

how do you solve this if not change to use webgl?