# Dom elements get out of place when using zoom

**URL:** <https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527>\
**Category:** Phaser 3\
**Created:** [September 5, 2023, 11:51am UTC](https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527 "2023-09-05T11:51:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![luism](https://avatars.discourse-cdn.com/v4/letter/l/a88e57/32.png) [@luism](https://phaser.discourse.group/u/luism)\
**Post date:** [September 5, 2023, 11:51am UTC](https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527/1 "2023-09-05T11:51:06Z")

</div>

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:

> **[Phaser 3 Examples](https://labs.phaser.io/edit.html?src=src%2Fgame%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, '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) ?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 5, 2023, 4:15pm UTC](https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527/2 "2023-09-05T16:15:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![luism](https://avatars.discourse-cdn.com/v4/letter/l/a88e57/32.png) [@luism](https://phaser.discourse.group/u/luism)\
**Post date:** [September 7, 2023, 12:34pm UTC](https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527/3 "2023-09-07T12:34:26Z")

</div>

Thanks for the suggestion @samme

This is the issue link in case someone is interested:

> <https://github.com/photonstorm/phaser/issues/6607>
>
> \<!--
> Thank you for taking the time to contribute towards Phaser. Before submitt…ing your issue, check the following:
> 
> 1. This repo is for Phaser 3 only. Phaser 2.x issues should be raised in the \[Phaser CE\](https://github.com/photonstorm/phaser-ce) repo.
> 
> 2. This repo should not be used for technical support. If you're struggling to use Phaser then post your question to the \[forum\](https://phaser.discourse.group/) or \[Discord\](https://phaser.io/community/discord) channels. GitHub Issues are for bugs and feature requests only.
> 
> 3. Make sure your issue isn't a duplicate, or has already been fixed.
> 
> 4. If your issue contains \_any\_ form of hostility it will be closed and you will be blocked from access to all our repos. Be nice. We do this for free.
> 
> 5. If all the above is ok, fill out the template below.
> \--\>
> 
> 
> \## Version
> \<!--
> Enter the version of Phaser you're using. You can find this output to the Dev Tools console in your browser.
> \--\>
> \* Phaser Version: 3.55.2 / 3.60.0
> \<!--
> Place the operating system \*\*below\*\* this comment.
> \--\>
> \* Operating system: Windows 10
> \<!--
> If the bug is browser specific, please enter the version \*\*below\*\* this comment:
> \--\>
> \* Browser: Chrome 116.0.5845.141
> 
> 
> \## Description
> 
> \<!--
> Write a detailed description of the bug \*\*below\*\* this comment. Include the expected behavior and what actually happens. If the issue is device specific, please say so.
> \--\>
> 
> The dom elements added to the scene get out of place when the zoom changes.
> 
> \## Example Test Code
> 
> \<!--
> All issues must have source code demonstrating the problem. We automatically close issues after 30 days if no code is provided.
> 
> The code can be pasted directly below this comment, or you can link to codepen, jsbin, or similar. The code will ideally be runnable instantly. The more work involved in turning your code into a reproducible test case, the longer it will take the fix the issue.
> \--\>
> 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
> 
> \<!--
> Is there anything else you think would be useful for us to reproduce the error? Do you have a solution in mind?
> 
> If you have any screen shots or gifs demonstrating the issue (if it can't be seen when running your code), please include those too.
> \--\>