Dom elements get out of place when zooming

[luismolinav]

Version

• Phaser Version: 3.55.2 / 3.60.0

• Operating system: Windows 10

• Browser: Chrome 116.0.5845.141

Description

The dom elements added to the scene get out of place when the zoom changes.

Example Test Code

Example by slightly modifying in the following link:
https://labs.phaser.io/edit.html?src=src/game%20objects%5Cdom%20element%5Cform%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, 'Text', { 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
};

Additional Information

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527/3

[luismolinav]

Hello @photonstorm
Is the same, I'm the one that wrote that, and by suggestion there posted this issue.

[photonstorm]

@luismolinav those messages (about Discourse) are automatic, I don't write them personally.

[photonstorm]

You're right, they do - but without wanting to get into perspective handling and scaling the DOM container to match the camera zoom, I feel like this is a valid limitation. Frustrating, yes, but the DOM Game Objects are only really meant for very simple tasks (buttons, login form), anything more complex should consider something like our Vue Template.