md-swipe not working correctly on chrome for android

[wolfet]

Actual Behavior:

• What is the issue? *
  On the latest version of Chrome for Android, md-swipe is not working as expected. md-swipe-left is triggered from a swipe in any direction. md-swipe-right, md-swipe-up, and md-swipe-down do not respond.
• What is the expected behavior?
  md-swipe-left should respond only to left swipes, and other md-swipe-* directives should respond to their respective directions.
  CodePen (or steps to reproduce the issue): *
• CodePen Demo which shows your issue: http://codepen.io/twolfe/pen/pNQBrb
• Details: This works on chrome desktop, but not chrome for Android version 55.0.2883.91. Open the codepen, http://codepen.io/twolfe/full/pNQBrb/, on an Android phone with the latest Chrome update, or with Chrome DevTools device mode, to see the issue. This issue is showing up on my Pixel XL.

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome for Android
• Browser Version: *55.0.2883.91
• OS: *Android 7.1.1
• Stack Traces:

[RoniPa]

This can also be repeated in the Chrome DevTools Device Mode

[LohithAnand]

I encountered the same issue on my hybrid Cordova app. Downgrading the Android System Web view from the play store is a workaround for hybrid apps which use web views for now.
I hope the issue will be resolved soon.

[mdtjn]

Hi Team, its driving my users crazy. Need some quick fix

[imromec]

@LohithAnand, how to downgrade the Android System Web view from the play store?

[LohithAnand]

@imromec Locate the Android System Webview in play store and click on the uninstall button. This will rollback to the version of Webview shipped with the OS.

[SlavaSlimmy]

Same problem on main site demo in the Chrome DevTools Device Mode: https://material.angularjs.org/latest/demo/swipe

[mohammadrafigh]

+1

[motabass]

+1
Any workarounds for now?

[mohammadrafigh]

let me mention that issue also appears on Firefox when testing in device mode with touch enabled. it's kind of a normal to high priority issue IMO but there is no attention to it yet...

Update:

I just had a review on code and found that angular material uses initCustomEvent() to make these native events which is deprecated currently, I'm not sure if that's the reason... just shared my findings.

[watat83]

I'm currently building a web app which makes use of sliders extensively. Since I discovered this issue I can't find sleep. Development has slowed down as a result of this feature not working correctly especially in mobile. It work fine on desktop though.

[imromec]

If you are building hybrid app using cordova, then this issue can be resolved by installing cordova crosswalk plugin.

[RoniPa]

Seems that in Chrome Device Mode, in the $mdGestures provider, the touch pointercancel event with properties x and y as 0 is triggered on swipe end. In regular mode the mouse pointerup event is triggered with the x and y properties set to the location where mouse click ended. I believe the issue could have something to do with this.

[duncan1a]

+1 ... really need a fix for this

[duncan1a]

Could the issue be here?

function getEventPoint(ev) {
  ev = ev.originalEvent || ev; // support jQuery events
  return (ev.touches && ev.touches[0]) ||
    (ev.changedTouches && ev.changedTouches[0]) ||
    ev;
}

ev.touches and ev.changedTouches are always undefined so ev is always returned.

I'm not sure how ev.touches are supposed to work, but it seems that this is looking for the original event to return. That is compared in updatePointerState() with the current event and direction calculated.

Any ideas on how to get around this?

[RoniPa]

I believe the issue might be in the missing pageX and pageY properties on the last returned touch event (pointercancel), because the swipe direction gets always calculated towards the upper left corner here:

function updatePointerState(ev, pointer) {
  var point = getEventPoint(ev);
  var x = pointer.x = point.pageX; // point.pageX == 0
  var y = pointer.y = point.pageY; // point.pageY == 0

  pointer.distanceX = x - pointer.startX;
  pointer.distanceY = y - pointer.startY;
  pointer.distance = Math.sqrt(
    pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY
  );

  pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';
  pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';

  pointer.duration = +Date.now() - pointer.startTime;
  pointer.velocityX = pointer.distanceX / pointer.duration;
  pointer.velocityY = pointer.distanceY / pointer.duration;
}

As this broke with a Chrome update I believe they changed the browser so that either the pointercancel event data changed or it's the wrong event type to begin with (are we expecting pointerup for example?)