Links (and clicks) fail to open with Cordova on iOS 8.4.1

Question

The latest iOS release (8.4.1) seems to have broken our ngCordova app.

Our links generally don't open, whether accessed by href directly, ng-click, or ng-href. Some will open after repeated clicking, and the hrefs have a popup menu that allows us to select "open", "copy", or "cancel" if we click and hold on them for a period of time.

The problem doesn't distinguish between button or a tag. Some a tags seem to work just fine.

We were on older versions of cordova and ngcordova, but updating them hasn't fixed this.

I've also tried disabling user select, but that didn't fix it.

This problem only happens on device, not in the emulator.

We use the angular-mobile-ui directive toggleable for a sidemenu, and the toggle event is firing when links in the sidemenu are clicked, but the link doesn't redirect.

Answer 1

Another way is to set the css property like this (it works for me):

button:active { opacity: 1 !important; }

Something pretty stupid that I could not understand, but I think it is something related to Apple posted in: https://support.apple.com/en-us/HT205030

"Impact: A malicious website can make a tap event produce a synthetic click on another page Description: An issue existed in how synthetic clicks are generated from tap events that could cause clicks to target other pages. The issue was addressed through restricted click propagation."

So I suppose if the button on the active state is set to the lower opacity than 1, Apple should consider that this is a synthetic click.

Answer 2

I am having the same problem. See the security changelog from Apple here https://support.apple.com/en-us/HT205030

Impact: A malicious website can make a tap event produce a synthetic click on another page Description: An issue existed in how synthetic clicks are generated from tap events that could cause clicks to target other pages. The issue was addressed through restricted click propagation.

I think that the issue stems from this change.

What you can do is add the touchstart event to your click events. This has resolved my issue for now until I find a better solution.

$('button').on('click touchstart', function(){
    // Click event
});

Answer 3

Using latest version of FastClick worked for me.

Answer 4

I was able to resolve the problem by installing the fastclick library. FastClick