Issue with Ion-content on android


#1

I am having an issue with Beta 6 of Ionic on Android devices.

Essentially, if I have an ion-content block, I am unable to click on any links inside that ion-content block on android. This is not an issue on IOS but has not been working for me since beta3 on android. I am testing on Android phones with Kitkat.

So in order to reproduce the issue, create a ion-content block and put any type of html element that has a ng-click event on it. The ng-click never gets fired.

<ion-content>
<div ng-click="test()">Test click"</div>
</ion-content>

Anybody else experiencing this type of issue? This is a really bad issue for me and keeping me from making my app functional on android. Any help or insight is greatly appreciated.


#2

Since it’s kitkat, you can remote debug from chrome with the adb. Are you getting any errors in the console?


#3

Forgot to add this is a cordova app. I think my mobile phone should be able to reach my local web server though, let me try and see if I can remotely test via chrome. I didnt see anything in the android console when i was testing the app though.


#4

I couldn’t debug using chrome on android because the site does cross domain ajax requests and there is no way to enable that function on chrome for android. I did test this using eclipse and watching all output from debugger and did not see any javascript errors related to this issue.

I also tested out what happens if i remove the ion-content block on android just to double check that clicking on links works and it does work when i remove the ion-content block surrounding the content that has ng-click elements inside of it. This is what has me convinced it is very specifically an issue with ng-click on ion-content on android.


#5

I bet the DOM structure of ion-content, ion-nav,etc is wrong.
Maybe a side-menu not well nested or something is interfering your tap events over your ion-content.


#6

I put together a simple example in codepen, can you try this and see if it works?

If not, could you share a codepen or plnkr so I could test it on my end?


#7

So I kept playing around with settings and finally got something to work. If I disable ionic scroll on the ion-content directive and user overflow-scroll, it seems to completely fix the problem and I am able to get ng-click working on Android. Since this is a an app i am developing for a client, I can’t necesarily share it publicly. I really do want to help you guys get to the root of the issue. Is there any debug or event tracing mode I can enable that will allow me to see whats going on? I would be more than happy to do my best to try and help you guys get it figured out. My gut instincts think that something in your code that deals with scrolling is not recognizing that I am currently not scrolling so it is preventing clicks from being allowed. I tried your sample codepen on the android browser on my phone and it seemed to work fine. I can spend a little bit of time taking that codepen and building it as an android app and testing it. Would that help?

Thanks in advance,
Chris