zooming - Disable Chrome pinch zoom for use in kiosk

zooming – Disable Chrome pinch zoom for use in kiosk

zooming – Disable Chrome pinch zoom for use in kiosk

Weve 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).

Weve 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
  • –disable-pinch – disables the pinch-to-zoom functionality
  • –overscroll-history-navigation=0 – disables the swipe-to-navigate functionality

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 youre 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 theyll leave it as a setting.

3. Disable all touches, whitelist for elements and events matching your app

In all tests that weve 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, itll activate before it bubbles to the documents 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 its a full-screen, non-scrollable kiosk app, maybe these features wont be important.

html {
  touch-action:none;
}

This will disable browser handling of all panning and zooming gestures. The gesture will still be available for handling by javascript code.

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

zooming – Disable Chrome pinch zoom for use in kiosk

Just so anyone stumbling across this page is aware the flag in Chrome to disable pinch to zoom is now:

Google Chrome/Chromium/Canary version above 50:

chrome://flags/#touch-events

Google Chrome/Chromium/Canary version less then 50 or old versions:

chrome://flags/#enable-pinch.

Related posts on Zooming :

Leave a Reply

Your email address will not be published.