Dom elements get out of place when using zoom

Phaser 3
1

I want to add a dom element with some css animation but when the zoom changes the element get out of place.

I’m usign Phaser v3.55.2, but with 3.61 doesn’t work either.

Example by slightly modifying the following:
https://labs.phaser.io/edit.html?src=src/game%20objects\dom%20element\form%20input.js

class Example extends Phaser.Scene
{
preload ()
{
this.load.html(‘nameform’, ‘assets/text/loginform.html’);
this.load.image(‘pic’, ‘assets/pics/turkey-1985086.jpg’);
}

create ()
{
    this.add.image(400, 300, 'pic');

    const text = this.add.text(10, 10, 'Please login to play', { color: 'white', fontFamily: 'Arial', fontSize: '32px '});

    const element = this.add.dom(400, 300).createFromCache('nameform');

    // Removed some code before and added this
    this.cameras.main.zoomTo(0.5, 2000);
    setTimeout(()=>{ this.cameras.main.zoomTo(1.5, 2000) },4000)
}

}

const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: ‘phaser-example’,
dom: {
createContainer: true
},
scene: Example
};

const game = new Phaser.Game(config);

Is there a way to achieve this (html + css animation + zoom) ?

2

I’ve noticed this too. You could add a GitHub issue for it.

3

Thanks for the suggestion @samme

This is the issue link in case someone is interested: