hammer.js: Vertically scrollable content breaks panning in Chrome 55 (Android and desktop)

@bbialas

How you disable it ?

Specifying the inputClass to use worked in my case: let mc = new Hammer(el, { inputClass: Hammer.TouchInput });

Seems to fix up the pen from the original issue as well.

Only works on touch devices now, so depends what support is needed …

I was in a hurry to fix so I just edited the hammer.js script locally and changed line 384 to be: var SUPPORT_POINTER_EVENTS = false

Solved all my troubles for now, but hoping this can be addressed in the upcoming versions

I checked it and played a bit with Hammer code. Major change between Chrome 54 and 55 is turning on Pointer Events. Because of this PointerEventInput class is used instead of TouchInput class. When I changed the code to not instantiate PointerEventInput at all it starts to work properly for me on Chrome 55. I didn’t test if such change doesn’t break IE or Edge.

@larssn Thanks for this worked a charm. I did however add a check in the buildHammer function to see if the UserAgent was Android.

buildHammer(element: HTMLElement) {
    if ( navigator.userAgent.match(/Android/i) ) {
      return new Hammer(element, {
        inputClass: Hammer.TouchInput,
        touchAction: 'pan-y'
      });
    } else {
      return new Hammer(element);
    }
}

Based on @cmdickson 's solution, in angular 2+ you wanna do something like this:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

import * as Hammer from 'hammerjs';
import 'hammer-timejs'; // Optional

export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'pinch': { enable: false },
        'rotate': { enable: false },
        'doubletap': { enable: false }
        // ...
    };

    buildHammer(element: HTMLElement) {
        return new Hammer(element, {
            inputClass: Hammer.TouchInput,
            touchAction: 'pan-y'  // If using horizontal gestures - http://hammerjs.github.io/touch-action/
        });
    }
}

and then in your module providers:

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { HammerConfig } from './hammer.config';

@NgModule({
  declarations: [AppComponent],
  providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Hammer team, any plan to fix it?

I ended up just writing my own carousel without Hammer 😕

For anyone interested, here’s the code