External links don't work in iOS

Question

Our site runs on WordPress. On this page we have a series of text widgets, each containing a chunk of HTML and inline CSS. It's a bit crude, but it allows us to provide our marketing people with a simple template they can use to add a new item.

Each item is a link wrapped around an image, an h1 and some p tags. We're getting a really weird issue on iOS. The link is supposed to open a new browser window. When we're on an iPhone 4 and tap on some of the links - like the top two examples currently on the page - nine times out of ten we briefly get a tiny loading icon in the iOS top status bar, then nothing else. The only way to get the link to respond is to tap and hold till you get Safari's Open/Open in New Page dialogue. On the other hand, when we tap on some of the other links the new window opens straight away as you'd expect. You should see what I mean if you try that on an iPhone 4.

I've carefully compared the HTML for the items that work properly, and the dodgy ones, and they seem to be pretty much identical, apart from content differences. Here's an example of markup that works OK:

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">    
    <a target="_blank" href="http://yourworld.metro.co.uk/" style="text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/07/ay_113922733.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN PRIZES WITH YOUR PICS!</h1>    

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every week in Metro’s Your World we'll set you a photo challenge and feature the best submissions in our digital editions. And, for the whole of July we're giving away Samsung Galaxy cameras AND Amazon vouchers for the best photos! Check out this week’s challenge and submit your photos here.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

and here's one that has the weird behaviour:

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
    <a target="_blank" href="http://intu.co.uk/lakeside/competition/metro" style="display:block;text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/11/comp-module.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN £2,000 to spend at intu Lakeside</h1>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every day this week, Metro is teaming up with intu Lakeside shopping centre to offer five lucky readers the chance to win a gift card with a whopping £2,000 to spend at the centre. For your chance to win, click here. Competition opens Monday 2nd December.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

Can anyone explain this bizarre situation or suggest a fix? I've been noticing a similar issue on other links. Maybe this is an iOS bug?

=============== EDIT

I should mention I've tried changing the order of the items in the list in case there was some invisible element on the page that was obstructing the touch event. I've also added the same items to a dummy list on my test WordPress site. And I've tried changing the CSS, including the overflow style on the container, and the text in the h1 and p tags. All with no change to the behaviour.

=============== EDIT

This has something to do with the href of the link. When I change the href of the dodgy item to the same as the good item it suddenly works fine. Bizarrely, when I change the href to http://google.com , http://yahoo.com or http://bbc.co.uk it stops working. When I set it to http://metro.co.uk it works. WTF???

Answer 1

We seem to have found the answer to this - iOS Safari's popup blocker is blocking the links. A colleague tried the same page on his iPhone 5S and encountered the same behaviour. He also noticed that his desktop Chrome was blocking popups when he tried the links there. When I turned off popup blocking in iOS Safari they worked fine. Also, when I removed the target="_blank" attribute from the links they worked fine with popup blocking on. Adding target="_blank" to the links with JavaScript didn't help.

The conclusion from this experience is that iOS Safari blocks external links with a _blank target.

Answer 2

On iOS, Safari mobile renders the content. Its behavior is very different from the desktop safari. I'm thinking the errors begin with using commands the mobile safari can't understand. In your code overflow:auto is one of them. But see the accepted solution for that here: Overflow-x value ignored in mobile safari

Also if you're using javascript note not all events are handled by the mobile safari. If you're noticing strange behavior, i would start my investigation around these issues first. For eg. some events are not firing at all or they're firing instantly because they're not implemented. It's a really deep bunny hole imho.

I hope it helps a little.