Dom elements get out of place when using zoom

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:\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) ?

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

Thanks for the suggestion @samme

This is the issue link in case someone is interested: