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.

score 5 · Answer 1 · edited Jan 28 '16 at 00:08

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.

+1 This fix worked for me. I updated the fastclick library and nothing happened, but setting button's opacity to 1.0 worked — atc, Aug 21 '15 at 19:40

score 4 · Answer 2 · answered Aug 17 '15 at 11:52

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

We found the same thing---fastclick resolved it for us. – GeneralBear Aug 17 '15 at 11:55 — GeneralBear, Aug 17 '15 at 11:55

score 3 · Answer 3 · answered Aug 18 '15 at 04:18

3

Using latest version of FastClick worked for me.

answered Aug 18 '15 at 04:18

Ched Cheatham

31
2

GeneralBear · Accepted Answer · 2015-08-18T13:01:07.797

2

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

edited Aug 18 '15 at 13:01

answered Aug 17 '15 at 16:42

GeneralBear

952
1
9
29

1

Also affected on one of our apps with FastClick 0.6.11, resolved with latest version of FastClick – Nicolas R Aug 26 '15 at 14:19

score 1 · Answer 5 · answered Aug 17 '15 at 15:18

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!

score 0 · Answer 6 · answered Aug 16 '15 at 17:03

0

Can you try reinstalling your inAppBrowser plugin

answered Aug 16 '15 at 17:03

Ranjith Varma

405
3
11

score 0 · Answer 7 · answered Aug 16 '15 at 21:42

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

I ended up resolving it by using the fastclick library https://github.com/ftlabs/fastclick — GeneralBear, Aug 16 '15 at 22:26
My project was already using fastclick, and I still had the issue. I call it like this: FastClick.attach(document.body); — Danny Connell, Aug 16 '15 at 23:01

score 0 · Answer 8 · answered Aug 17 '15 at 07:12

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

score 0 · Answer 9 · answered Aug 25 '15 at 19:41

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?

RickSF · Answer 10 · 2015-08-26T16:36:11.290

0

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

edited Aug 26 '15 at 16:36

answered Aug 26 '15 at 14:09

RickSF

1
1

Tried this: a:active { opacity: 1 !important; } – RickSF Aug 26 '15 at 16:28
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); – RickSF Aug 26 '15 at 16:31

score 0 · Answer 11 · answered Sep 01 '15 at 19:18

0

this worked for me:

a, button { opacity:1 !important; }

THX arzanardi

answered Sep 01 '15 at 19:18

Bolko

145
1
1
9

score 0 · Answer 12 · answered Sep 04 '15 at 15:00

0

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

answered Sep 04 '15 at 15:00

riccio82

91
1
6

score 0 · Answer 13 · answered Oct 27 '15 at 06:05

0

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

z-index:10000000;

answered Oct 27 '15 at 06:05

Mayur

503
1
6
17

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

13 Answers13