Bug 228338 – On iOS 15 Safari tapping on an interactive three.js project leads to the floating address bar popping up

• Component: UI Events
• Status: NEW

[Paris Morgan]

Created attachment 434304 [details]
Video of three.js project where a tap brings up the floating address bar

On iOS 15 Safari several three.js projects, as well as many projects across the web, have a behavior where tapping leads to the bottom address bar popping up on each tap. My expected behavior is that tapping on an interactable canvas would not pop up the bottom address bar. As an example you can see the issue in these projects, and also in the attached video:
- https://threejs.org/examples/webgl_intractive_voxelpainter.html
- https://threejs.org/examples/webgl_raycast_texture.html

I also tested on A-Frame, and the  behavior is slightly different:
- three.js: Happens on interactive projects with tapping.
- A-Frame: Happens on some interactive projects with tapping, i.e. https://aframe.io/aframe/examples/showcase/comicbook. But other projects work as expected (the address bar remains minimized on tap), for example https://aframe.io/aframe/examples/showcase/link-traversal & https://aframe.io/aframe/examples/showcase/ui.

So, a few questions based on this:
- Is there a suggested way to tell the browser that the canvas is being used for interaction and taps should not pop the address bar up? Perhaps there are specific listeners to attach?
- Is there a way to have the address bar minimized on page load? On load it sometimes starts popped up, and other times minimized.

I have attached a video of this issue, please let me know if I can provide more information, thank you.

[Radar WebKit Bug Importer]

<rdar://problem/81195088>

[Asheem]

A similar issue is affecting multiple users of Mapbox GL-JS. Initially reported here: https://github.com/mapbox/mapbox-gl-js/issues/11048

This stand-alone page demonstrates the issue: https://codepen.io/rsreusser/full/mdwYNNe