51

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?

Dennis Smolek
  • 8,480
  • 7
  • 30
  • 39

6 Answers6

86

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
  • --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 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.

Weston Wedding
  • 136
  • 1
  • 8
JimmyG
  • 876
  • 7
  • 4
  • 1
    Thank you for pointing out the flag. They initialized it but didn't put a flag in to disable. For a while there it was a serious issue. We have hardware access so firing the command line or just the flag worked great for us. – Dennis Smolek Jul 11 '14 at 23:34
  • First solution (chrome flags) worked like a charm for me, thanks a lot. – David Dahan Apr 28 '18 at 12:15
  • ad 3) event listeners are set to passive by default since Chrome 56 (not 51) – xpuu May 06 '19 at 09:10
  • 2
    Since chrome 80 `overscroll-history-navigation=0` does not work https://bugs.chromium.org/p/chromium/issues/detail?id=1060053 – CodeBrauer Sep 04 '20 at 09:30
22
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

lbesson
  • 43
  • 3
phil
  • 231
  • 2
  • 2
  • Welcome to Stack Overflow! Whilst this code snippet is welcome, and may provide some help, it would be [greatly improved if it included an explanation](//meta.stackexchange.com/q/114762) of *how* it addresses the question. Without that, your answer has much less educational value - remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. In particular, how does this still allow single-touch events to work? – Toby Speight May 01 '17 at 12:06
  • 2
    This solution worked great for an Angular App running on a ChromeOS device in Kiosk mode and managed via Google Chrome Management. The chrome flag approaches worked, but setting those flags via Chrome Management doesn't seem to be an option. Thanks for the straight forward answer. – tlaughlin Jun 26 '19 at 15:16
  • 2
    This is stupendous! Thank you. – Jonathan Tuzman Mar 03 '20 at 22:12
9

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.

James Lott
  • 101
  • 2
  • 4
  • #touch-events : disable full touch screen not only pinch zoom. So from version 50 the pinch is removed does not exist anymore? can you retest? –  May 22 '16 at 20:45
  • Relatively old post but I'm also running into this issue now where I need ONLY the pinch zoom disabled. Worked brilliantly with Chrome 58, but launching in Chromium 51 doesn't. – KDT Jun 19 '17 at 08:47
3

I'm dealing with the same issue. I think I can handle it reasonably well with the following approach

  • determine the css pixel width of the html element: document.documentElement.clientWidth
  • compare this measurement to the known pixel width of the kiosk screen
  • if the html element is wider, in css pixels than the screen is, in physical pixels, that means it's scaled
  • if the html element is scaled, apply a zoom to the body element to compensate. The formula is `body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth

This techique has the beneficial side effect of automatically scaling the UI to whatever size the current window is, which is helpful for development if I'm developing on a screen smaller than the target screen.

More on screen pixels vs css pixels, and a discussion of how the html element expands to fill the available space at quirksmode.org.

morgancodes
  • 25,055
  • 38
  • 135
  • 187
  • With the changes to the Chrome Flags this is the method we've gone to. [Here](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers) is a good link on detecting the zoom level. We listen for the resize event and adjust with CSS. – Dennis Smolek Sep 24 '16 at 16:25
  • @DennisSmolek can you elaborate? Link to a code sample? Thanks – DeBraid Jan 06 '17 at 20:47
3

Another solution that currently works in Chrome (54) is to add an event listener for the 'touchstart' event and call preventDefault() based on the length of the targetTouches or touches on the event.

This solution prevents a pinch (any two fingered gesture for that matter), but still provides flexibility with how you want to respond to the event. It's a nice solution because it doesn't require you to disable touch events altogether (as required if you want to disable pinch using the chrome flags, since chrome://flags/#enable-pinch no longer exists).

window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)
wgardiner
  • 243
  • 2
  • 4
  • I can still beat the JS with pinch before it stops me.. So then the page is zoomed in but now its near impossible to zoom out. – Dennis Smolek Dec 02 '16 at 17:49
  • Are you saying that sometimes the browser handles the event before preventDefault runs? But that this behavior is inconsistent? I'm not experiencing this but I'd like to test it out. – wgardiner Dec 20 '16 at 15:24
  • 1
    yeah on windows the chrome browser will start the accessibilities features before javascript can prevent them. So someone pinching will cause a zoom. It's hard to do but if I try over and over I can replicate it. So when a visitor plays with the screen they can accidently zoom it, then it gets stuck that way.. – Dennis Smolek Dec 26 '16 at 23:52
0

As of Version 51.0.2704.84 m, chrome://flags/#touch-events disables all the touch-events not only the pinch function. FYI. Hopefully, Google will return this functionality in future release.

wendecator
  • 49
  • 2
  • 11