Hammer.js: Swipe event doesn't work in Chrome 55.0

[AliceClarity]

We use leftSwipe and rightSwipe to detect the event but neither of it works in Chrome with version higher than 55.0. But before it worked in Chrome 54.0 and version lower than 55.0.
Also tried in Firefox and Safari, and both of them work fine.

hammer.add(new Hammer.Swipe({ event: "leftSwipe", direction: Hammer.DIRECTION_LEFT }));
hammer.add(new Hammer.Swipe({ event: "rightSwipe", direction: Hammer.DIRECTION_RIGHT }));

This problem can also be test here https://hammerjs.github.io/

[ccapndave]

This is only when using touch - doing the swipe action with the mouse does still work!

[AliceClarity]

I cannot swipe in my Mac chrome in the swipe example in this page https://hammerjs.github.io/

[cholz]

+1
Having this issue on android Chrome version 55 and Windows Chrome Version 55, using mobile device emulator.

[zippex]

I can confirm this issue on several Android devices. The problem only occurs in Chrome - swipe still works with the default browser on the same devices.

[josex2r]

Hi.
In our app we have a relative positioned header where swipe events works fine, the next element in the DOM is a div which has the style overflow-y: auto; breaking the Hammer recognizer.

[ritterb82]

Seeing this problem also.

Can we make this a high priority item to get fixed and released.

What is the best hotfix for this? Just to take WoodyWoodsta's branch?

[WoodyWoodsta]

@ritterb82 By all means, go ahead. After trying it out, I ended up abandoning that approach as it appears to break pan support on desktop versions of, at least, chrome. Unfortunately I do not have time to try and find a way around this without help understanding the library from one of the members!

A similar package has also run into the same problem and is taking a similar, temporary approach in https://github.com/zingchart/zingtouch/commit/6ada7839f513f8d13b82750f031e45f2af08111f. Perhaps one could get some hotfix ideas from there.

[ritterb82]

Also, just to add some more details. The swipe stops working as soon as I add the overflow property to the div.

[svewag]

Any workaround or fix available?

[raucao]

Also, just to add some more details. The swipe stops working as soon as I add the overflow property to the div.

Same here.

[anschutz]

You can try setting { inputClass: Hammer.TouchMouseInput }
Tested on Chrome and FF for android, Chrome and Safari for iOS and Chrome, FF, Safari and Opera for OSX.

[galfert]

You can try setting { inputClass: Hammer.TouchMouseInput }

That doesn't fix it for me. I still don't get any swipe events when swiping over an element with overflow: auto.

[arschmitz]

I think this is due to chrome making touchEvents passive by default. Ill try to find time to lookinto this and fix this week

[PierBover]

Not sure if this is related but this works for me:

Hammer(element).on('swipeleft swiperight', onSwipe);

But this doesn't:

var hammer = new Hammer(element);
hammer.add(new Hammer.Swipe());
hammer.on('swipeleft swiperight', onSwipe);

I'm on Chrome 56 using the device mode from developer tools.

[f3dd3rn]

@josex2r I've found a workaround, because I have the same issue as you have. Here it is:

<div data-div-with-overflow-css-property style="overflow-y: auto">...</div>

var hammered_div_with_overflow_css_property = new Hammer(document.querySelectorAll('[data-div-with-overflow-css-property]')[0]);
hammered_div_with_overflow_css_property.on('swipeleft', swipeLeftHandler);
hammered_div_with_overflow_css_property.on('swiperight', swipeRightHandler);

[NikoHelle]

I have a similar ui-library with similar issues. I noticed that latest Chrome has support for pointer events which does not have "touches" or "targetTouches" properties in the event object. Therefore multitouch events cannot be detected from the event object itself.

Seems that I have to start saving pointerIds and the state (up/down) of pointers. Or somehow force touch events.

[josex2r]

Thanks @f3dd3rn, it works 👍

[sculove]

the iscroll also uses pointer event as a default if browser can use pointer event.
but, if you use pointer event, you should controll touchAction property.

so, I solved a similar problem.
https://github.com/cubiq/iscroll/pull/1122

[attiks]

FYI

I've solved my problem (Swipe not working on Chrome 56 on Android) using this

      var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
        touchAction: 'auto',
        inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
        recognizers: [
          [Hammer.Swipe, {
            direction: Hammer.DIRECTION_HORIZONTAL
          }]
        ]
      });

[clauderic]

@attiks That solved the issue for me as well, thanks for sharing your solution ❤️

[FTavukcu]

Strangely enough I also had issues with the swiping (and only the swiping event) on a div that had "overflow-y" set to "auto". My Hammer was capturing directly on the body:

Hammer(document.body).on("swipe tap press", touchHandler);

adding an empty event handler to my div solved the issue and now I can scroll up and down within the div and still swipe left and right to navigate:

Hammer(document.body).on("swipe tap press", touchHandler);
Hammer(document.getElementById('myScrollableDiv')).on('swipe', function(){});

Hope this helps someone!

[satheeshui]

I've found a workaround, because I have the same issue as you have. Here it is:

...

var hammered_div_with_overflow_css_property = new Hammer(document.querySelectorAll('[data-div-with-overflow-css-property]')[0]);
hammered_div_with_overflow_css_property.on('swipeleft', swipeLeftHandler);
hammered_div_with_overflow_css_property.on('swiperight', swipeRightHandler);

It works fine for swipeleft and swiperight
I need to enable swipeup and swipedown. can anyone help me fix this one?

[aastronaut]

I had a div element that needed to be scrollable up/down and swipable left/right. None of the above suggestions fixed it... What helped instead was to put

touch-action: pan-y;

to its child element and adding

const options = {
  recognizers: [
    [hammerjs.Swipe, {
      direction: hammerjs.DIRECTION_HORIZONTAL,
    }],
  ],
}

to the hammerjs manager.

Might have to look at this any further: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[emilio-martinez]

I came about this issue when creating a Hammer instance through new Hammer(...). Haven't looked into what the deeper issue might be, but the immediate remedy for me was to use Manager directly:

import { Manager, Swipe, DIRECTION_HORIZONTAL } from 'hammerjs';

const hammer = new Manager(element);
hammer.add(new Swipe({ direction: DIRECTION_HORIZONTAL }));

... or ...

const hammer = new Manager(element, {
  recognizers: [[ Swipe, { direction: DIRECTION_HORIZONTAL } ]]
});

[Getitdan]

Just making @FTavukcu's answer more generic, simply add this:
```javascript
let overflowYElements = document.querySelectorAll('div.panel, aside.side-nav'); // all elements with overflow-y: auto;
for(let element of overflowYElements) {
let hammerBug = new Hammer(element);
hammerBug.on('swipeleft swiperight', () => {}); // passing an empty function solves this issue
}

[AliceClarity]

Thanks @attiks, it works on Chrome 65.

[kyleengan]

@attiks I noticed this disabled swiping with the mouse on desktop view. For folks that need to support horizontal swiping on desktop and mobile devices, can try the following (this is 99% Attiks' solution, just one minor change on my part, changing TouchInput to TouchMouseInput):

  var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
    touchAction: 'auto',
    inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchMouseInput,
    recognizers: [
      [Hammer.Swipe, {
        direction: Hammer.DIRECTION_HORIZONTAL
      }]
    ]
  });

This doesn't seem to break anything in my project, hopefully it's kosher. :)

[egordon9dev]

Instead of mapping the hammer instance to the scroll able element, I did this...
<div style="position:fixed;left:0;bottom:0;height:100vh;width:100vw;" id="overlay"></div>
and
Hammer(document.getElementById("overlay")).on('swipeleft' function(ev) { . . . });
it's kinda hacky tho.

[SandLZ]

FYI

I've solved my problem (Swipe not working on Chrome 56 on Android) using this

      var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
        touchAction: 'auto',
        inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
        recognizers: [
          [Hammer.Swipe, {
            direction: Hammer.DIRECTION_HORIZONTAL
          }]
        ]
      });

Nice, you save my life!

[d337]

FYI

I've solved my problem (Swipe not working on Chrome 56 on Android) using this

      var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
        touchAction: 'auto',
        inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
        recognizers: [
          [Hammer.Swipe, {
            direction: Hammer.DIRECTION_HORIZONTAL
          }]
        ]
      });

Saved my life too..