Phaser and CanvasInput problem

[kyrv19]

Hi, I'm developing a mobile game, and I have a few fields that player needs to fill out, I use CanvasInput, but it causes a strange problem, that it zooms in to the game and changes the resolution and then the rest of a game disappears. Like on the screen:

[mattstyles]

I don't know the CanvasInput plugin you're talking about but I've seen some similar implementations that stick an invisible input element on to the page and use that underneath to handle input, however, standard browser behaviour (at least for iOS Safari) is to zoom in to the input element, sounds like you're seeing the same sort of thing on Android. For iOS (since 10 I think) there is no way to turn this off, its an accessibility feature and its impossible to disable those browser features, you might have more luck for Android.

There are some other tricks, you can make the input element the full width of the screen, this usually stops the browser from zooming, however, you'll have to stick it at the same height on the page as your input placement in the canvas otherwise the browser will try to scroll to focus it. You can also try upping the font-size of the input element, for the same reason the browser won't zoom if it thinks the input is clearly visible (i.e. the font is big enough) but it'll still scroll to focus. Both of these fixes might be impossible for you depending on what the CanvasInput module exposes as options. Most modules are on github, maybe try looking through the issues for the module repo, there might be a way to fix it (it's an external module right, not part of Phaser? If it is part of Phaser someone here probably also uses it, but, again, use github issues as well to flag it and/or find a fix).