In my project, I have observed a peculiar behavior that only occurs on specific devices and browsers.
The desired behavior involves using Device Orientation Controls (Three.js) for users to "look around" and utilizing this virtual joystick library for movement, which generally works well across most devices:
- Demonstrating the functionality on Chrome with an iPhone 7
THE ISSUE: However, in the second video (), when I initiate movement and the joystick appears, the Device Orientation Camera freezes until I release the joystick, then it abruptly corrects itself. In the video, I perform a 'long press' before moving, which eliminates the freezing (hopefully visible).
This discrepancy occurs specifically on Safari and Chrome with an iPhone 11. Interestingly, it does not manifest the same way on Chrome with an iPhone 7 or X, despite all using the same Chrome version (83.0.4103.88).
I also noticed that on an iPhone 7 using Safari, visiting the official Device Orientation Controls example allows me to manipulate the site's orientation, triggering a similar freezing effect on the camera.
Upon exploring, I came across the use of preventDefault in virtualjoystick.js and learned about the need to declare passive: false in event listeners. I attempted to implement this in the touch event listeners of virtualjoystick.js:
(Code snippet provided)Despite these adjustments, the freezing persists, and it did not provide the immediate solution I had hoped for. The code snippet in question also triggers an error message in the console:
virtualjoystick.js:255 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passiveAdditionally, the part of my animate() function responsible for handling joystick inputs is as follows:
(Code snippet provided)If anyone has insights or suggestions to guide me in troubleshooting this issue, I would greatly appreciate it.