[Beta 14] Issues with dragging to show/hide the side menu on Android

[cbruun]

I created a Codepen where the issue can be reproduced. Link: http://codepen.io/anon/pen/EaPjJR . It is based on the official Side Menu and Navigation Codepen (http://codepen.io/ionic/pen/tcIGK).

The only difference between the two is that I added a handle on the left side of the screen with a toggle menu directive.

On Android, If I start the side menu drag on the navigation bar or the handle, nothing happens. On desktop Chrome and on iOS this works just fine.

Also, when the side menu is open, it is not possible to use a drag to close it again. Only a click on the content area or the navicon closes it.

The problem occurs on Android 4.4.4 and 4.2.2 and possible more versions.

[cbruun]

Forgot to mention this is using the following version: v1.0.0-beta.13-nightly-852

[bastiwasni]

I got the same issue with the same version.
Another thing I mentioned is, that there is no animation anymore when toggling the sidemenu.
But also just on android.

[drewrygh]

What devices are you using @casperbruun, @bwasnie1?

I've confirmed this is a problem on Android 4.4.2 using a Moto G.

[drewrygh]

@casperbruun - you're using the codepen above when you say you're not getting any animations? Can you provide any more info? Also, if you feel it's a bug it'd be better to open a new ticket to keep this things organized.

[bastiwasni]

I am using Galaxy Note 4 with Android 4.4.4.

[cbruun]

I tested on a Nexus 5 running 4.4.4 and a Galaxy S4 with version 4.2.2.

@drewrygh I am getting animations. I think your comment was meant for @bwasnie1 :)

[bastiwasni]

I want to add, that I am not using the ionic.bundle.js as in @cbruun codepen examples. My index.html includes these files (also same order)
angular.js#1.3.5
angular-animate.js#1.3.5
ionic.js#1.0.0-beta.13-nightly-854
ionic-angular.js#1.0.0-beta.13-nightly-854

I used Ionic v1.0.0-beta.13 "lanthanum-leopard" before where the dragging works fine, but not the scrolling in the "ion-side-menu-content" directive.

[adamdbradley]

@bwasnie1 Would you be able to create a codepen replicating the issue? thanks

[bastiwasni]

Haven't created one yet, sry ^^
I was looking in ionic-angular.js to find the issue and I have found that the onDragRelease(e) function is already called while I am still dragging with my finger.
Then I did the same in my browser, but there the onDragRelease(e) function works perfectly and only gets called when i release mousebutton while/after dragging.

[bastiwasni]

A quick but dirty workaround is to change the onDragX(e) function:

function onDragX(e) {
if (!sideMenuCtrl.isDraggableTarget(e)) return;
if (getPrimaryScrollAxis(e) == 'x') {
sideMenuCtrl._handleDrag(e);
}
e.gesture.srcEvent.preventDefault();
}

This worked for me, but I think there are better ways to fix this ^^

[drewrygh]

@bwasnie1
ionic.bundle.js is a concatenation of:

ionic.js, 
angular.js,
angular-animate.js,
angular-sanitize.js,
angular-ui-router.js,
ionic-angular.js

If you use the nightly ionic bundle is the animation problem fixed? I've tried on 3+ emulated Android devices so maybe you don't have the right file/order?

[drewrygh]

@cbruun - I was initially thinking you were trying to trigger the sidemenu to open by sliding the handle. Tapping on Android 4.2.2, 4.4.4 works on all devices I've tried on, and I've built directly from your codepen. Maybe you can provide a video? Need something more to be able to confirm/reproduce this.

[cbruun]

@drewrygh

I am trying to open the side menu with a sliding gesture that starts on the handle or the navigation bar. Neither works.

If I start the drag gesture in the middle of the page the side menu is shown. A tap on the handle will show the side menu as well.

Once the side menu is open only a tap can close it again. A dragging motion will not work.

[bastiwasni]

@drewrygh Thanks for your help, but it wasn't the file order ^^ I am a little bit embarrassed because the solution was that simple. I had "overflow-scroll='true'" on my ion-content. After removing it, it works with dragging it open. Not as smooth as on pc but it works.

As @cbruun said: "Once the side menu is open only a tap can close it again. A dragging motion will not work."
I have the same problem with that now.

[cbruun]

@drewrygh Made a video: https://drive.google.com/file/d/0B7tG5TmrpqCSYm03ZjFSWE1kems/view

[adamdbradley]

I'm using the codepen and I cannot get it to not work. When you use the same codepen it doesn't work either on any Android device?

[cbruun]

@adamdbradley @drewrygh I can see the Codepen works now when run from a Chrome browser on Android. I am almost certain it did not work when I submitted the bug report, but it could be an error on my part.

However, it does not work when run from within Cordova app. I tried using both Cordova 3.6.3 and 4.1 and the problem persists on both versions. Both Android test phones have the exact same problem.

The Cordova app is completely bare-bone. I ran the create project command and added the files from the Codepen along with a small config.xml file. No plugins or custom native code.

You can download the app here.

[cbruun]

@adamdbradley @drewrygh

After a lot of debugging I can see the issue is related to #1729. I have created a directive with a temporary fix, see below. It works with both Android test phones (4.4.4 and 4.2.2).

Do you know if using this workaround will have any negative consequences? So far the app seems to be running just fine.

angular
    .module('ionictestmodule')
    .directive('fixAndroidTouch', [
        '$rootScope', '$ionicPlatform',
        function(rootScope, ionicPlatform) {
            return {
                link: function() {
                    ionicPlatform.ready().then(function() {
                        if (ionic.Platform.isAndroid()) {
                            var documentOnTouchMoveFix = function (event) {
                                event.preventDefault();
                            };

                            document.ontouchmove = documentOnTouchMoveFix;

                            rootScope.$on('$ionicView.afterEnter', function () {
                                document.ontouchmove = documentOnTouchMoveFix;
                            });
                        }
                    });
                }
            };
        }
    ]);

[tiagodocouto]

no fix yet?
updated from beta 13 to beta 14 and now can't close side menu by swiping...

LG G3 4.4.2
1.0.0-beta.14-nightly-924

:(

[bkboggy]

I haven't had any luck either thus far... :(

[akhileshrai]

Still facing this issue :|

[alwasih]

Yes I'm also facing the same issue. Swipe to open menu, then swiping back just doesn't work (moto x 2013, Android 4.4.4). Seems to work just fine with my Nexus 7 on Android 5.0.1

[tiagodocouto]

I'm testing my app using CrossWalk 11.39.258.0 and the menu close swipe back working!
LG G3 D855P Android 4.4.2

But now is crashing on android 4.2
01-05 12:11:16.362: E/WifiManager(12177): mWifiServiceMessenger == null 01-05 12:11:16.680: E/dalvikvm(12177): Could not find class 'android.bluetooth.BluetoothManager', referenced from method org.chromium.media.AudioManagerAndroid.hasBluetoothHeadset 01-05 12:11:17.631: E/chromium(12177): [ERROR:unix_domain_client_socket_posix.cc(101)] Not implemented reached in virtual int net::UnixDomainClientSocket::GetPeerAddress(net::IPEndPoint*) const 01-05 12:11:17.632: E/chromium(12177): [ERROR:unix_domain_client_socket_posix.cc(101)] Not implemented reached in virtual int net::UnixDomainClientSocket::GetPeerAddress(net::IPEndPoint*) const 01-05 12:11:17.633: A/libc(12177): Fatal signal 11 (SIGSEGV) at 0x07b5f852 (code=1), thread 12177 (tan.CapptanPass)

[rafaellop]

I've tried the dirty way proposed by @bwasnie1 (above) and it worked for me on all my test devices (4.0.4, 4.2.2 and 4.4.3). Without the hack I cannot open side menu if the current page container is a div element with overflow scroll. With the hack both the side menu is working properly when dragged and the div can be scrolled.

[tiagodocouto]

ok, solved my problem using Crosswalk 10 (:

[ajoslin]

OK, the problem is:

With native scrolling enabled on Android 4.4-, the browser will send a touchcancel as soon as scrolling starts and abort any further touchmove events. The only way to stop this is to call e.preventDefault() on the touchmove events.

How to fix this? Well... it's going to require some thought.

[adamdbradley]

Please test out this fix and let me know how it goes: a5881ea

I'm going to close this issue so we can keep the discussion on #1729

Thanks

[ghost]

Hi,

It seems the issue is still here with native scrolling: we cannot drag in the side menu (it works with JavaScript scrolling, i.e. sidemenu starter app default configuration).

Steps to reproduce:

• Install the sidemenu starter app: ionic start myApp sidemenu
• Edit the config() to add native scrolling: $ionicConfigProvider.scrolling.jsScrolling(false);
• Deploy on an Android device (mine: Xiaomi MIUI / Android 4.4.4)
• Try to drag in the side menu: nothing happens. Only the button allows to show the menu.

The following workaround in run() (found in another post) fixes the issue to close the menu by swiping. But removing the condition to make it work to open the menu breaks the scrolling.

if (ionic.Platform.isAndroid()) {
    document.addEventListener('touchstart', function (event) {
        if ($ionicSideMenuDelegate.isOpenLeft()) {
            event.preventDefault();
        }
    });
}

I checked the link in @adamdbradley 's last response, but I didn't find solution for that. Any idea about what could be done?

Thanks!

[seanheinen]

I've had this same issue to this day.

I managed to get mine working 100% by making a simple change to the ionSideMenuContent directive.

In the compile function property there is a function called onDragX.
By removing the if getPrimaryScrollAxis condition mine works:

function onDragX(e) {
if (!sideMenuCtrl.isDraggableTarget(e)) return;
//if (getPrimaryScrollAxis(e) == 'x') {
sideMenuCtrl._handleDrag(e);
e.gesture.srcEvent.preventDefault();
//}
}


I understand there is probably a reason for this check. From my understanding it to do with whether or not the user swiped an X which then turned into a Y. I've played around with the swiping since and my experience hasn't been affected negatively in any way..

[mainakanyi]

I am not able to close the side menu by swapping. What is the solution? Best Regards

[ionitron-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.