We are using Chrome in kiosk mode and accidentally users are causing the application to zoom with the recent addition of pinch zoom support. They then think they've broken it and simply walk away leaving the application (and subsequently a 55" touch screen) in a broken state.
Now the only thing to work has been stopping event propagation for touch events over 2 points. Issues with that are we can't do multitouch apps in that case and if you act fast the browser reacts before javascript. Which in our tests still happen on accident by users.
I've done the Meta tags, they do not work. Honestly I wish I could disable chrome zooming at all but I cant find a way to do that.
How can I stop the browser from zooming?
Click the three vertical dots in the top right of your Chrome browser. In this drop-down menu, click “Settings.” Scroll down to the “Appearance” section. Open the “Page Zoom” drop-down menu and select the zoom setting that's best for you.
Touch or click the picture of the touchpad. Touch or click the Gestures tab. Touch or click the box next to Pinch Zoom to Enable or Disable the Pinch Zoom function.
On Chrome v. 71. x.x, you can pinch zoom pressing 'Toggle Device toolbar' at dev tools and after hold SHIFT and click-drag your mouse.
We've had a similar problem, it manifests as the browser zooming but javascript receiving no touch event (or sometimes just a single point before zooming starts).
We've found these possible (but possibly not long-term) solutions:
1. Disable the pinch / swipe features when using kiosk mode
If these command-line settings remain in Chrome, you can do the following:
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
2. Disable pinch zoom using the Chrome flags chrome://flags/#enable-pinch
Navigate to the URL chrome://flags/#enable-pinch in your browser and disable the feature.
The pinch zoom feature is currently experimental but turned on by default which probably means it will be force-enabled in future versions. If you're in kiosk mode (and control the hardware/software) you could probably toggle this setting upon installation and then prevent Chrome updates going forward.
There is already a roadmap ticket for removing this setting at Chromium Issue 304869.
The fact that the browser reacts before javascript can prevent it is definitely a bug and has been logged at the Chromium bug tracker. Hopefully it will be fixed before the feature is permanently enabled or fingers-crossed they'll leave it as a setting.
3. Disable all touches, whitelist for elements and events matching your app
In all tests that we've conducted, adding preventDefault() to the document stops the zooming (and all other swipe/touch events) in Chrome:
document.addEventListener('touchstart', function(event){ event.preventDefault(); }, {passive: false});
If you attach your touch-based functionality higher up in the DOM, it'll activate before it bubbles to the document's preventDefault() call. In Chrome it is also important to include the eventListenerOptions parameter because as of Chrome 51 a document-level event listener is set to {passive: true}
by default.
This disables normal browser features like swipe to scroll though, you would probably have to implement those yourself. If it's a full-screen, non-scrollable kiosk app, maybe these features won't be important.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With