# Dom element wrong position on iOS \[solved\]

**URL:** <https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282>\
**Category:** Phaser 3\
**Created:** [August 26, 2020, 10:08pm UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282 "2020-08-26T22:08:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![William\_Soeparjo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/william_soeparjo/32/1406_2.png) [@William\_Soeparjo](https://phaser.discourse.group/u/William_Soeparjo)\
**Post date:** [August 26, 2020, 10:08pm UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282/1 "2020-08-26T22:08:18Z")

</div>

Hi,

I have a problem with dom element position/coordinate,  
I want to show loaded “html” content into game, and put it to center of screen, dom position are just fine on Android and Desktop, but not for iOS.

This is what the problem look like on iOS:

 ![rtyu](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/56c81e919a152c58676481a8258f0b17dd78c380.png)

How to fix this?

UPDATE: Its my mistake to add canvas style that can break dom element

---

<div class="post-metadata">

**Author:** ![Thyebe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thyebe/32/3799_2.png) [@Thyebe](https://phaser.discourse.group/u/Thyebe)\
**Post date:** [August 27, 2020, 4:10am UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282/2 "2020-08-27T04:10:13Z")

</div>

Could you please put the code that shows the DOM element in the scene?

---

<div class="post-metadata">

**Author:** ![William\_Soeparjo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/william_soeparjo/32/1406_2.png) [@William\_Soeparjo](https://phaser.discourse.group/u/William_Soeparjo)\
**Post date:** [August 27, 2020, 5:17pm UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282/3 "2020-08-27T17:17:34Z")

</div>

Here is the code:

```
 let element = this.add.dom(win.x, win.y-60).createFromCache('rules');
	//element.setOrigin(0.5);
	element.addListener('click');
	container.add(element);

```

I need to put in on container, since i need to resize game object to fit both desktop and mobile version.

---

<div class="post-metadata">

**Author:** ![Thyebe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thyebe/32/3799_2.png) [@Thyebe](https://phaser.discourse.group/u/Thyebe)\
**Post date:** [August 27, 2020, 6:04pm UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282/4 "2020-08-27T18:04:39Z")

</div>

> [@William\_Soeparjo](#):
>
> I want to show loaded “html” content into game, and put it to center of screen,

Have you checked the screen dimensions of each device?  
And why don’t you set the x position as game.config.width / 2 and the position y as game.config.height / 2, to put the element in the center of the screen?

---

<div class="post-metadata">

**Author:** ![William\_Soeparjo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/william_soeparjo/32/1406_2.png) [@William\_Soeparjo](https://phaser.discourse.group/u/William_Soeparjo)\
**Post date:** [August 27, 2020, 7:49pm UTC](https://phaser.discourse.group/t/dom-element-wrong-position-on-ios-solved/7282/5 "2020-08-27T19:49:06Z")

</div>

Yes, because win.x & y are same with game.config size.

Now i know what causing this bug, i put a custom css (only ios) to fix canvas height problem on ios.  
but its causing another bug.

![ghgj](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3c789ab45125f933d631f0e114f0da227903a98f.png)

Anyway, thanks for your reply