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.