Ionic And Cordova - Css Active Not Working On Android Device

I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in andro

Solution 1:

By experience, angular ng-mousedown andng-mouseup events do not fire up on the mobile device. My experience was ionic 1.6.4 on iOS.

However, on-touch and on-release works flawlessly well. So just replace ng-mousedown and ng-mouseup with on-touch and on-release, respectively.

<a on-touch="class='bg-active-darkBlue'" on-release="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>

Here is the pointer to the ionic reference documentation on the on-touch and on-release events.

Hope this helps..

Solution 2:

Apparently, the "right" way of doing this is according to phonegap-tips.com is to add an ontouchstart="return true;" on the element.

eg.

<aclass="bg-active-darkBlue"ontouchstart="return true;">:active now works in cordova</a>

That worked for me, so I hope it works for you too.