Ionic-framework: (pan) event deltaY is wrong

[edoardoo]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
In a mobile Chrome browser (and Android webview), (pan) listener on a tag returns a wrong $event.deltaY value, until it completely stop to receive events.

Expected behavior:
In a mobile Chrome browser (and Android webview), (pan) listener is called constantly when panning the div. The event has a reasonable delta Y from the initial touch coordinates.

Steps to reproduce:

Add a (pan) listener to an element and show the value of $event.deltaY on the same page.
Here I've added it to the ion-content component.
https://run.plnkr.co/7NxHxrrUkV8pSFH8/

Related code:

Other information:

Tested on

• Nexus 5x Oreo 8.0.0, Chrome 60.0.3112.116
• Chrome Desktop, Version 60.0.3112.113 (Official Build) (64-bit)

Works smoothly on Firefox Mobile and Firefox Desktop 55.0.3 (64-bit) for Mac.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/Users/edo/.nvm/versions/node/v6.9.1/lib/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 6.3.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 5.2.2
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v6.9.1
    npm  : 3.10.8
    OS   : macOS Sierra

[kensodemann]

Hello! Thank you for opening an issue with us!

I get a server error when I try to use your plnkr. Can you double check the URL you posted?

Another good option is to provide your app via StackBlitz (this is probably the easiest option) or posting a sample application via GitHub.

Thanks for using Ionic!

[edoardoo]

@kensodemann
Sorry, here is a working link: http://run.plnkr.co/plunks/1fEPnHrpr3lFGeUPt7uU/

[edoardoo]

I've investigated a bit and it might looks like its hammer.js bug:
https://github.com/hammerjs/hammer.js/issues/1050

And the fix they suggest is to add this line to the element you want to catch the pan of:

touch-action: none !important;

Which, for the records, worked for me.
EDIT:
The event fires with the right values now, but in a laggish/unresponsive way. So sometimes it takes seconds to get the first event.

[kensodemann]

Hello! Thank you for for the updated information. Since this is not an Iconic Framework issue, I am going to close this issue.

Thank you for using Ionic

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.