Ok I finally cracked this code, and I’m sharing the results with the community here. If you want to have text input working on mobile, you must use an iframe(I guess doesn’t have to be an iframe…point is, HTML+CSS of your own, I guess it could work if it was all in a div as well). Create a separate HTML file + CSS that is just the form screen.
On the default loading screen, here’s how you can add the iframe(well actually, you don’t need to do this on the loading screen unless the form is the first screen)
var wrapper = document.createElement('div');
wrapper.id = 'application-splash-wrapper';
document.body.appendChild(wrapper);
var iframe = document.createElement('iframe');
iframe.id = "iframe";
iframe.setAttribute("style", "position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:" + window.innerHeight + "px; border:none; margin:0; padding:0; overflow: scroll-y");
const registry = pc.Application.getApplication().assets;
registry.once('add:105801925', (asset) => {//number is asset's id. I'm getting the html file from the assets folder
iframe.src = asset.getFileUrl();
document.body.appendChild(iframe);
});
The iframe attributes that are set are extremely important, specially for chrome. Otherwise it scales the iframe(less than the PlayCanvas’ canvas, but still) and messes up the layout. Now everytime you type it scrolls to the text input field without changing the layout of your page…
Ps: I hate css. Simple shit like this takes several hours of research to find the right combination of styles and attributes that works across browsers…ffs I just wanted to place a freakin text box and use it, why it has to be so painful.