External links don’t work in iOS

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???