Dom element wrong position on iOS [solved]

Phaser 3
1

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
rtyu494×889 111 KB

How to fix this?

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

2

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

3

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.

4

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?

5

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

Anyway, thanks for your reply

1 Like