scottjehl
Android Chrome and Native Browser - scrolling cancels touchmove events
Summary:
When trying to use touchmove events to say, drag a carousel slide from left to right, browsers like iOS Safari will allow you to keep default event handling enabled, so you can still scroll the page vertically while dragging an element horizontally.
Android Chrome and the native browser don't seem to allow this. The touchmove event fires a couple of times and then stops. The only workaround I can find is to event.preventDefault, which disallows the ability to scroll the page behind a draggable component. If the component is large enough, preventing default could render a page completely unusable, and at best, a user would need to know that they have to start their scroll gesture outside the bounds of a draggable component.
Platforms:
- Android (4.4 and older) Chrome, native webkit browser too
How to reproduce:
- open this demo page in android chrome: http://jsbin.com/titubiro/1
- try dragging horizontally on the page. it should log touchmove events continually in the top left as you drag, but instead it will stop logging after a couple events are fired.
(test the same URL in iOS Safari or even Chrome on a Mac with touch events enabled, and you'll see the desired result.)
Bug Tracker ticket(s):
Workarounds:
- preventDefault the event (this introduces additional issues)
My results on Android 4.1.2:
Chrome/Opera - one "move" per touch Firefox/stock browser - many "move"s while moving finger during touch
Related: https://github.com/madrobby/zepto/commit/d945672b89be7957b268e01df1dc6425de5932b1
Looks like the common fix is to check the delta on pageX and pageY and only preventDefault if over a certain threshold.
Chrome has never just stopped sending touch events, it sent touchcancel to indicate that the touches were now being consumed by the browser to drive scroll. The difference here with Safari was confusing though, so a couple years ago in Chrome 36 we changed Chrome to better match Safari.
