4

I have a webgl game working fine on iPad Safari I can disable system pinch / zoom actions with usual solutions (like this one: disable viewport zooming iOS 10+ safari?) But I can't get any to work after the game is switched to fullscreen with document.body.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)

I have touch-action: none;, user-scalable=no in meta, passive: false and e.preventDefault(); for all touch events (touchstart, touchend, touchmove, touchcancel)

Edit: here's a codepen with most things I've tried: https://codepen.io/SerialF/pen/BaaRKJN

Florent
  • 391
  • 1
  • 12
  • i have the same problem and i have been searching the solution for months – Kocsis Dávid Jan 20 '20 at 16:25
  • I still haven't found any solution either :( No answer [on three.js forum](https://discourse.threejs.org/t/problems-with-running-3d-web-apps-games-on-iphones/9468) – Florent Jan 21 '20 at 17:11

1 Answers1

0

Have you made any progress on this? I am running into a similar issue with a three.js built on angular application. Can't figure out how to disable the exit full screen on an ipad in safari when pinch-zoom-out. I found that Chrome doesn't support full screen on ipad, I tried disabling touch events, e.preventDefault() on a touchstart listener. I can not find where the exitFullScreen is being called, seems like it's just built into the OS and is completely independent from the DOM.

UPDATE: Not a 100% solution but thanks to Florent for bringing this workaround to my attention.

"They do suggest to add a shortcut to home screen, as with all the required PWA meta-tags (see here), this is the only way to have fullscreen working properly"

  • No, never found any solution. My games don't use fullscreen on ios, it's unusable. They do suggest to add a shortcut to home screen, as with all the required PWA meta-tags (see [here](https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8)), this is the only way to have fullscreen working properly. – Florent Apr 27 '22 at 17:17