Pan event doesn't work correctly with touch-action pan-y in Chrome 55

[zuibunan]

Before upgrade to Chrome 55.0.2883.59 beta (64-bit), it works fine
but now, when I pulldown in chrome emulator , the panmove event just triggered once or twice, and the event data is not correct

this is the right event data when i set touchAction none, but if touchAction is none , the page will not scroll

coarse demo
http://jsbin.com/tevitozuku/edit?output

[BossLevel]

I have a similar problem - panmove has been working for nearly 2 years, no change to the code and it's stopped. This is Chromium Version 55.0.2883.75 (64-bit). The event appears to trigger correctly at first but the event data I am capturing (var x = event.changedPointers[0].movementX * -1;var y = event.changedPointers[0].movementY * -1;) appears as 0 values. The event will then trigger with any mouse move (not pan) over the bound area.

It appears to work fine in Firefox 50.0.2 but there my bound Tap events are now passing incorrect x/y info.

[glomotion]

I think i too am having this issue after updating to Chrome to Version 55.0.2883.75.

All pan directions are a problem for me right now. PanStart fires as expected, but the onPan event fires once only, for that entire gesture.

*Note, it only seems to be a problem while touch emulation is running. If you disable "touch emulation" then everything works as expected.

My guess is the chrome team changed something in the way that chrome emulates device touch events...

[vnavarrete17]

+1 , I have the same problem on pandown/panup and my panend is never triggered .
:(

[IhorSyrov]

+1 , I have the same problem on pandown/panup and my panend is never triggered .
:(

+1 This is a very big problem =((

[BossLevel]

Agreed - I'm going to have to pull hammer out of my project if it remains this way.

[sitexw]

Ok, I'm not crazy ^^ I have exactly the same problem.
(Except that in my case, I am on the eve of a release in production !)

[arjunkathuria]

looks like chrome team indeed update touch-action options.

they added 'pan-up pan-down pan-left pan-right' with earlier pan-x and pan-y.
link here

they might be interfering with the TOUCH_ACTION constants in hammer.
link here

These properties force the user to start gestures in one direction before the element will respond. This is similar to the "pull-to-refresh" gesture which only responds when the user gestures downwards on the screen.

This line could be the troubling bit.

cc:- @arschmitz

[glomotion]

So we're also in the unfortunate predicament of being very, very close to a launch. The app concerned is pretty heavily affected by this bug.

Is there any chance at all, we could get some kind of eta on a potential patch? Or even just an indication of how severe this problem really is (and how complicated the fix will need to be) - would be awesome.

I really don't want to have to rip hammer out of the project (hammer rox!) - but may be forced to if this issue remains for much longer. :(

[zuibunan]

@glomotion Chrome Dev for Android have the problem too , not only emulator

[glomotion]

@zuibunan Yup. I'm now finding that too. :( I think it was because the Android devices I was testing on were yet to upgrade to Chrome 55. 55 appears to have since rolled out to all our test devices now - and now they all show this problem.

[raghavendra-polanki]

Any one able to find a solution for this problem?

[gargsahil25]

Make sure you set the proper touch-action css attribute for your canvas element.
Ref: https://developers.google.com/web/updates/2016/10/touch-action
My issue got resolved by adding below code in my css
.main-canvas { touch-action: none !important; }

[rejhgadellaa]

I've done some digging and testing and it looks like the Chrome's new Pointer Events api has some issues:

• On desktop it fires pointermove after pointerup
• On mobile (android, at least) the touch-action css property does not get inherited by child elements

That last thing might be the problem if you, like me, attached hammer to an element that has children because the event gets cancelled if you start the touch on a child element (it fires pointerdown, pointermove and then pointercancel).

I've created tickets for the issues above on the chromium tracker so you can star those:
https://goo.gl/esp1S5 and https://goo.gl/LesGXI

[rejhgadellaa]

As an addition to @gargsahil25 solution: make sure the touch-action property is set to all child elements as well:
.main-canvas, .main-canvas * { touch-action: none; }

I recommend not using the !important because you may want to override that property for one or more child elements, like..
.main-canvas .cant-touch-this { touch-action: auto; }

Also, using !important is not a good idea in general and should only be used when needed. Or maybe unless gargsahil25 has a very good reason for using that, of course :)

(PS: the above solution is a complete hack/workaround for a bug. the bug needs fixing, this solution needs to go :P)

[antipod]

Thanks @gargsahil25, it worked semi-ok. I have a couple of carousels on the mobile website and this at least made it pan i y-direction as it did before. The only problem is that before Chrome 55 rolled out, I could put my finger on the carousel and scroll up and down on the page, whereas now nothing happens.

Maybe that can be solved with hammer.js itself. If anyone have a clue about how to fix that, I'm listening.