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.

Wildlife

Answer 1

I had the same problems with Cordava 4.1.2 and iOS 8.4.1, I solve the problem updating FastClick

Lions

Answer 2

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.

Highsounding

+1 This fix worked for me. I updated the fastclick library and nothing happened, but setting button's opacity to 1.0 worked – Start

Answer 3

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
});

Ocasio

We found the same thing---fastclick resolved it for us. – Wildlife

Answer 4

Using latest version of FastClick worked for me.

Fluoridation

Answer 5

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

Wildlife

Also affected on one of our apps with FastClick 0.6.11, resolved with latest version of FastClick – Apophyllite

Answer 6

Are you using the FastClick library? Can you try and update to the latest version?

We experience the same issue with iOS 8.4.1 and FastClick version 0.6.7. When we updated to the latest version of the FastClick library the issue was solved. Not sure how and why it works, but it worked for us!

Asymmetry

Answer 7

Can you try reinstalling your inAppBrowser plugin

Archdiocese

Answer 8

I think I had the same issue, although I think it is to do with click events, rather than links in particular. My app is not using Angular, just jQuery, a few jQuery plugins..

• Transit
• hammer.js
• fastclick
• calculator (keith wood)
• base64
• plugin

..and some PhoneGap/Cordova plugins..

• cc.fovea.cordova.purchase 3.10.1 "Purchase"
• cordova-plugin-console 1.0.0 "Console"
• cordova-plugin-dialogs 1.0.0 "Notification"
• cordova-plugin-inappbrowser 1.0.0 "InAppBrowser"
• cordova-plugin-whitelist 1.0.1-dev "Whitelist"
• de.appplant.cordova.plugin.email-composer 0.8.2 "EmailComposer"
• hu.dpal.phonegap.plugins.PinDialog 0.1.3 "PinDialog"
• org.apache.cordova.splashscreen 1.0.0 "Splashscreen"
• uk.co.ilee.touchid 0.2.0 "Touch ID"

I have many buttons on my app, and with this iOS update only (8.4.1), I found that some of them worked and some didn't.

E.g. this is the markup for one of the buttons that stopped working:

<div class="button theme-bg" id="add-budget"><span>Add Budget</span></div>

And this is the associated jQuery:

$('#add-budget').on('click', function (e) {
    // do stuff
});

This worked fine from iOS 7.0 right up to 8.4. It only broke on 8.4.1.

In the end, I found that adding the following CSS rules to this button fixed the issue:

width: 100%;
float: left;
overflow: hidden;

I have absolutely no idea why this worked. It would be great if somebody can explain why. I only figured this out by looking at the CSS rules of buttons that did still work and applying them to the broken buttons.

Anyway, I hope it works for others as well. This is a horrendous issue with 8.4.1 - especially as this update was only supposed to affect Apple Music! I had to remove my app from all App Stores!

This is the full list of rules applied to my (now working) buttons:

.button {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    display: block;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -0.07em;
    -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.1);
    position: relative;

    /* 3 new rules added to fix the buttons: */
    width: 100%;
    float: left;
    overflow: hidden;
}
.theme-bg {
    background: #F88319;
    -webkit-transition: background 0.7s;
}

Shelf

I ended up resolving it by using the fastclick library github.com/ftlabs/fastclick – Wildlife

My project was already using fastclick, and I still had the issue. I call it like this: FastClick.attach(document.body); – Shelf

Answer 9

I am facing the same issue with ios project build from cordova version 3.5 The issue was resolved when I updated cordova to latest version (5.1.1) and rebuild project

I'm not sure that is root cause but It's working fine with me

P/s: My Project using angularjs and cordova

Dharana

Answer 10

I can personally vouch for Fastlink fixing this problem on our app that runs on Backbone/Marionette. We implemented it and our JavaScript click events worked as intended again, and there was no need to change from click to any touch method. I know that this is also affecting CSS drop-down menus (which our app doesn't have). Can anybody vouch for the CSS hacks mentioned above resolving the problem?

Languishing

Answer 11

I tried all of the solutions above:

- opacity:1; = no affect
- FastClick = worse than not working (activates links hidden beneath the CSS submenu)
- I've created a wonky workaround with the touchStart event, but it is not a decent permanent solution. Am also going to test the short touchStart solution above, but have kept the site super-light so am not even using JQuery and will have to re-write this.
- Fastlink = I don't know where to get this JS

My menu is a simple CSS-only submenu .. no Javascript at all. Until now, since Apple is apparently requiring it! (And people with JS turned off can no longer navigate the site.)

But I still haven't found a good solution even with JS to solve this global website-breaking issue that Apple has created!

More discussion on this topic at this posting in the Apple community: https://discussions.apple.com/message/28790737

Conception

Tried this: a:active { opacity: 1 !important; } – Conception

This sort of works, but is specific to pureCSSmenu: var lastTouch; function touchStart(event){ var currentElement = event.target; if(currentElement.parentElement.nodeName == 'LI' && currentElement.className != 'pureCssMenui0') { location.href=currentElement.href; } if(currentElement.tagName == 'A' && currentElement.className == 'pureCssMenui0'){ event.preventDefault(); if(currentElement.href != lastTouch) { lastTouch = currentElement.href; } else { location.href=currentElement.href; } } } this.addEventListener("touchstart", touchStart, false); – Conception

Answer 12

this worked for me:

a, button { opacity:1 !important; }

THX arzanardi

Horrify

Answer 13

I have same kind of issue i solved using css.I add below css and it worked for me.

z-index:10000000;

Caller