We currently have the issue that we want to embed our game on a website that is bigger than our mobile screen, so the website is scrollable. We use an iFrame to embed the game. On mobile, when touching the game with a finger and swiping up or down, scrolling the main website doesn’t work anymore. You can reproduce this behaviour in your own manuals, e.g. Animation without State Graph | Learn PlayCanvas
While loading the game, scrolling still works fine, but once the touch inputs are registered, the propagation/bubbling of the input events seem to be prevented. In the example above you can observe the same for scrolling with the scrollwheel. It works until the scene is loaded, now scrolling zooms in or out on the character.
Is there a way to circumvent this? I see that in most cases, the way it is behaving right now is what you want, keeping the iFrame where it is and not scrolling on the main website. But in our case, we would like the user to still be able to swipe up or down.
I’ve had a look at this and was unable to work out ‘why’ it was happening. Been trying to search on the internet about this and it seems to be a common issue outside of PlayCanvas
I managed to enable scrolling by patching 2 methods in the engine.
One was in InputElement#_handleTouchMove. This method calls event.preventDefault(); which prevents the event from reaching the main site. The other was in TouchDevice#_handleTouchMove. It had the same code and comment as the InputElement.
In both methods I commented out the line with event.preventDefault(); and now scrolling works fine
Important Note: If you are patching the engine by simply adding a script asset and overriding the prototype method of these classes, the asset needs to have its Loading Type set to After Engine. Otherwise the patch will be applied to late.
I’m wondering what the comment above those lines was about, as the link wilsonpage.co.uk is no longer working.
