7.1 - 8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers

I have a hybrid app that is Ionic and Material. Performance was acceptable on on all versions of Material Angular below 8.0. 8.0 - 8.3 on the Ripple emulator works perfect but as soon as I deploy to a device the application is such a slug that it is completely unusable. I am not seeing any errors in visual studio.

This is my environment:
Material Angular 8.0 - 8.3
Ionic bundle: Ionic, v1.0.0-beta.14, angular 1.3.6
Visual Studio 2013 Community Edition w/ Cordova
Moto X 2013 Android 4.4.4

Any help would be greatly appreciated!

--Update 1--
I have discovered more information related to the issue. It looks like I was slightly incorrect in my op about a couple things...

The issue is not necessarily that the app becomes slow as it is more of that the touch input is not registering very well. I have to tap many many times on any buttons or links that use ng-click to get them to finally register. It literally has to be very fast and repeated taps to get the click event to fire.
It is not 8.0 and above, it is 7.1 and above. Basically the versions since hammer.js was removed.
In addition to the android 4.4.4 device I have tried on another with 5.0.1 and it has the exact same issue.

--Update 2--
It is a conflict with the Ionic framework that started at version 7.1 of Angular Material. If you remove Ionic from your project the ng-click will work again

--Update 3--
I have confirmed this same issue happens not just in android apps but on android and IOS mobile websites as well. I have hosted a test site with material 8.3 here http://www.louspubcrawl.com/

You should probably post some reproducible code.

@gustavohenke

@gustavohenke Do you have any suggestions on how I could do that? I do not have the issue in the web based ripple emulator which makes me believe if I build out my entire project into a plunker that I would have not have the issue there either. It seems as if it only happens when deployed to a device. Here is my index.html

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
    <link href="Content/ionic.css" rel="stylesheet"/>
    <link href="Content/angular-material.css" rel="stylesheet"/>
    <link href="Content/index.css" rel="stylesheet" />
</head>
<body ng-app="mgmtAppModule">
    <ion-nav-view name="loginContent"></ion-nav-view>
    <ion-nav-view></ion-nav-view>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>
    <script src="external/ionic.bundle.js"></script>
    <script src="external/angular-aria.js"></script>
    <script src="external/angular-resource.js"></script>
    <script src="external/angular-material.js"></script>
    <script src="external/angular-cookies.js"></script>
    //angular scripts for app...
      ....

I have discovered more information related to the issue. It looks like I was slightly incorrect in my op about a few things...

The issue is not necessarily that the app becomes sluggish as it is more of that the touch input is not registering very well. I have to tap many many times on any buttons or links that use ng-click to get them to register. It literally has to be very fast and repeated taps to get the click event to fire.
It is not 8.0 and above, it is 7.1 and above. Basically the versions since hammer.js was removed.
In addition to the android 4.4.4 device I have tried on another with 5.0.1 and it has the exact same issue.

I have created a brand new Cordova Visual Studio project with only Angular Material, Ionc and their dependencies.
If you include any version of Ionc with Angular Material 7.1 and up the Angular ng-clicks will not work on an Android app.

Regular html buttons will not work with the ng-click at all and the material buttons will only work after many repeated presses. As soon as you remove Ionic OR downgrade to Material Angular 7.0 + Hammer.js the ng-clicks will work perfectly.

<button type="button" data-ng-click="btnClick()">Click Me</button>
<md-button class="md-raised gray-bg-btn" data-ng-click="btnClick()">Click Me</md-button>

var app = angular.module('app', ['ionic', 'ngMaterial']);
app.controller('ctrl', [ '$scope', function($scope) {
        $scope.btnClick = function() {
            alert("Button Clicked");
        }
    }
]);

Ok so I have found the issue is larger than just android hybrid apps. I have confirmed the issue happens even on a mobile website with IOS (Safari/Chrome) and Android (Chrome).
Here is a test site to pull up on a mobile device to show it not working http://www.louspubcrawl.com/

You can see the bottom material button will still respond but not consistently. The experience is even even worse on my cordova app.

yep i am aware of that, the trick is to only integrate the ionic css when trying to work with both framework

@thaiat

@thaiat but then you cannot use the ion views, etc

In which directive do you find scrolling is not working? For the md-select scrolling is working both on android and ios (for me at least). Do you want me to provide some code?

Scrolling will work, but if you attempt scrolling while tapping/holding an
element with the data-tap-disabled attribute then you cannot scroll. This
was the case when the original issue
#1406 was opened on Feb. 5th. So
maybe the data-tap-disabled has been improved to handle scrolling but from
my testing you cannot begin scrolling if you are holding an element with
data-tap-disabled="true" set.

On Fri, Mar 27, 2015 at 10:50 AM, Daniele De Matteo <
notifications@github.com> wrote:

In which directive do you find scrolling is not working? For the md-select
scrolling is working both on android and ios (for me at least). Do you want
me to provide some code?

—
Reply to this email directly or view it on GitHub
#1826 (comment).

@marcysutton

I think this issue can be merged with #1406 and #1528. @marcysutton @ajoslin @ThomasBurleson

Is this still planned for 0.9.0 ?

I too would like to know if this is planned for 0.9.0

commit 7b78071 seems to be related to this bug and several other related bugs.
could someone check and confirm?

Using the rawgit references, and on Ionic, still broken.

@drastick

@drastick - we are working on these gesture issues; targeted for the upcoming 0.9 release.

also having this problem

But it only happens after I build to a device. Tried all the above with no results.

For mobile solutions that are also using jQuery, you can now use $mdGestureProvider in

   app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

This will configure $mdGesture to not intercept clicks (stop propagation and prevent defaults).

Thanks a lot for the above fix. It solved a huge issue which was causing a major headache for me.
Angular Google Maps Directive Autosuggest stopped working since the touch wasn't reaching to the item in the list of suggested items. Finally this solved it.

Hi all, button events are not triggered in cordova ios mobile app,
i have tried all of the options mentioned above.
& deviceready event in cordova also not firing.
Plz let me know if any suggestions.

Navigation Menu

Repository navigation

7.1 - 8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers #1826

12 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

7.1 - 8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers #1826

Description

Activity

gustavohenke commented on Mar 8, 2015

atentis commented on Mar 8, 2015

atentis commented on Mar 9, 2015

atentis commented on Mar 9, 2015

atentis commented on Mar 9, 2015

thaiat commented on Mar 12, 2015

atentis commented on Mar 12, 2015

12 remaining items

DMDc0de commented on Mar 27, 2015

bradmartin commented on Mar 27, 2015

bradmartin commented on Mar 27, 2015

wrousseau commented on Mar 29, 2015

drastick commented on Mar 31, 2015

rlucian commented on Apr 2, 2015

CR88 commented on Apr 2, 2015

ThomasBurleson commented on Apr 2, 2015

badger27 commented on Apr 10, 2015

badger27 commented on Apr 10, 2015

ThomasBurleson commented on Apr 13, 2015

debarko commented on Aug 4, 2016

vasuvuggu commented on Feb 10, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions