Combined horizontal swipe and native vertical scrolling doesn't work on Android Chrome (V29)

[fcavelti]

I slightly modified the sample code from http://ember-touch-website.herokuapp.com/#/swipeAndPress:

App.SampleView = Ember.View.extend({

    swipeOptions: {
        direction: Em.OneGestureDirection.Left | Em.OneGestureDirection.Right,
        cancelPeriod: 100,
        swipeThreshold: 100
    },

    touchMove: function(event) {
        // Do not prevent event bubbling since we need native vertical scrolling
        //event.preventDefault();
    },

    swipeEnd: function(recognizer, evt) {
        var direction = recognizer.get('swipeDirection');

        if (direction === Em.OneGestureDirection.Right) {
            alert('Swipe Right');
        } else if (direction === Em.OneGestureDirection.Left) {
            alert('Swipe Left');
        }
    },
});

The code acts as expected on many browsers / mobile platforms (Safari + iPhone, Firefox + Android, Android Internet Browser + Android). It recognizes the horizontal swipes while vertical scrolling is properly handled by the browser.

But it doesn't work on Chrome V29 on Android on both my devices (Google Nexus 7 V1 and Samsung Galaxy Nexus).

The only way I found to make ember-touch notice the swipes on Chrome was by preventing the default action in touchMove(). But this breaks vertical scrolling.

[nickpellant]

:+1: On this I am experiencing the same problem - did you find a solution @fcavelti?

[fcavelti]

@nickpellant: No solution so far, I was working on other things in the meantime. Please let me know if you find one ;-)

[th0r]

+1

[toranb]

+1

[xenuit]

+1

[ashish-d]

+1

[meori]

I had a similar problem (needed vertical scrolling) and found this answer on stackoverflow: http://stackoverflow.com/questions/20412982/javascript-any-workarounds-for-getting-chrome-for-android-to-fire-off-touchmove

added this code to the view to handle it:

        // Chrome will fire a touchcancel event about 200 milliseconds after touchstart
        // if it thinks the user is panning/scrolling and you do not call event.preventDefault()
        touchStart: function(event){
            this.normalizeTouchEvent(event); // put originalEvent.touches directly on the event
            var touches = event.touches;
            if (touches.length === 0)
                return;
            var firstTouch = touches[0];
            this.set("cancelX", firstTouch.clientX);
            this.set("cancelY", firstTouch.clientY);
        },
        touchMove: function(event){
            this.normalizeTouchEvent(event); // put originalEvent.touches directly on the event
            var touches = event.touches;
            if (touches.length === 0)
                return;
            var lastTouch = touches[touches.length - 1];
            var deltaX = Math.abs(lastTouch.clientX - this.get("cancelX"));
            var deltaY = Math.abs(lastTouch.clientY - this.get("cancelY"));
            if (deltaX > 1.5 * deltaY)
                event.preventDefault();
        }

hope that helps

[ashish-d]

@meori Thanks! I think this will help me.

[TrevTheDev]

+1

[pniraula]

Any solutions yet? The code @meori provided is not working for me, is it working for you @ashish-d.

[andrewobrien]

+1

[vsymguysung]

+1 @meori I am trying to use your codes and wondering you could provide the normalizeTouchEvent codes also.

[ppcano]

Hi everyone, I apologize for the late reply, I have been maintaining ember-touch after the first initial release and have used it in 3 production apps. During this time, I realized that having a solid open source library to build and coordinate gestures is something useful for the web ecosystem and maybe it is a key factor to create web touch experience as competitive as native.

However, this library is not only useful to the ember community, so I decided to help building the version 2 of HammerJS which brings some of its missing features (support for recognizing multiple gestures simultaneously and an API to coordinate complex gesture scenarios), so the final result is a library which can be wider adopted and will be better maintained on the long term.

Because of these reason, I am not maintaining ember-touch and suggest everyone migrating its app to the current new version of HammerJS.

[pniraula]

@ppcano hey man thanks for the update. I already migrated my apps to HammerJS. It would be nice if you could point developers to HammerJS in project page. Oh, btw HammerJS is awesome.

[ppcano]

@pniraula, Yes!!, I'll do it.

If you need to recognize gestures simultaneously and need an API to coordinate them, you should check the new version and please, provide your feedback.