How to fix Chrome 35 and IE10 scrolling (touch action)

Recent versions of Chrome and IE support the touch-action css property. This property tells the browser how to handle touches on the given element, and prevents the default behavior (scrolling in most cases). Until Hammer 1.1.3, the default setting was set to none. This causes the element to be blocking in these browsers. The new default value is pan-y, which prevents all default browser behavior for horizontal touch-movements.

Chrome 35 for Android has placed the support for the touch-action property currently as a setting on chrome://flags/#enable-experimental-web-platform-features, but it will become enabled at version 36.

Should I update the default setting?

In short: yes, you should.

When using Hammer on small elements, this doesn't matter a lot. It still can be annoying that your page blocks the scrolling, but it becomes a bigger issue when you have nested a large area (like the body) with an Hammer instance.

You can try and experience how big the impact is by installing Chrome 35 Beta on your Android device, or try it on a Windows 8 touch device.

How do I change it for all instances?

To change the default setting you can set it in the code, but you can also do this before creating an instance by changing the touchAction value.

For Hammer 1.0.x this would be Hammer.options.stop_browser_behavior.touchAction = 'pan-y';

And the recent Hammer 1.1.x: Hammer.options.behavior.touchAction = 'pan-y';

Full example:

<script src="hammer.js"></script>
<script>
// fix scrolling issues with Chrome and IE
Hammer.options.stop_browser_behavior.touchAction = 'pan-y';
   
// ...your hammer code...etc...
var mc = new Hammer(document.body);
</script>

Preferred touch-action values per gesture

Gesture Event	Least restrictive touch-action value
hold	auto
tap	auto
doubletap	manipulation
drag, dragup, dragdown, dragend	pan-x
drag, dragleft, dragright, dragend	pan-y
swipeup, swipedown	pan-x
swipeleft, swiperight	pan-y
transform, transformstart, transformend	pan-x pan-y
rotate	pan-x pan-y
pinch, pinchin, pinchout	pan-x pan-y
touch	auto
release	auto