Bug 228338 - On iOS 15 Safari tapping on an interactive three.js project leads to the floating address bar popping up
Summary: On iOS 15 Safari tapping on an interactive three.js project leads to the floa...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Other
Hardware: iPhone / iPad Other
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-07-27 11:51 PDT by Paris Morgan
Modified: 2021-10-04 23:27 PDT (History)
2 users (show)

See Also:


Attachments
Video of three.js project where a tap brings up the floating address bar (1.19 MB, video/mp4)
2021-07-27 11:51 PDT, Paris Morgan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Paris Morgan 2021-07-27 11:51:43 PDT
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.
Comment 1 Radar WebKit Bug Importer 2021-07-27 19:30:02 PDT
<rdar://problem/81195088>
Comment 2 Asheem 2021-10-04 23:27:14 PDT
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