anchor tag not working in safari (ios) for Iphone/iTouch/iPad

[TechDMex]

This is a strange one.

All the anchor tags on my website work in IE, Chrome, FF, and even Safari on Windows.

And none of them work on safari IOS on my iTouch or iPad.

When I click on the any link or the items in the menu bar on iTouch, it will go change the background color as specified by the :hover in the css, but nothing happens. It's not just on the text anchors, but also the anchors on pictures and the logo also.

Again, all the anchors are working on other browsers (including Safari Windows).

The broken anchors are at www.flashpackertours.com

I'm hoping someone can point me in the right direction on how to debug this.

Thanks in advance for your assistance!

[handcraftedweb]

That is bizarre. I tested it and you're right, the links just don't work my iPad (iPad 1, ios 5.0.1). Note if you hold finger down on link, the menu pops up and you select "Open" it does work.

The page doesn't validate in the w3c validator nor this html5 validator, so I'd get it to validate and then see how it works. But it is bizarre, never seen that.

[TechDMex]

The validation on my home page failed because of the facebook like code isn't html5 compatible

However, I created a duplicate page at www.flashpackertours.com/home2.html with the facebook code off the page and it validates fine.

But, the links are still all not working on iPad. I've got some feed back from other iPad users who can't figure out why some websites are broken, and I think it's related to the same problem I'm having.

It may be related to a new "feature" where you hold your finger over a link and it comes up with a mobile-safari popup box which asks you what you want to do with the link.

However, you can't click the link. It looks like all the links are broken.

Again - works on all the major browsers, just not mobile safari.

Very weird.

Hope someone can help!

[TechDMex]

Found it!

I turned off javascript, and the links started working again. It's a java script I installed that tracks mouse movement for popup boxes. I would think since ios has no mouse, the java script would be kind of ignored, but instead, ios renders all anchor links useless. Don't know why, but I can disable the script for ios.

Hope this helps others in the future!

[handcraftedweb]

Glad you found it. Is the offending JavaScript a popular library or something you wrote yourself?

Found it!

I turned off javascript, and the links started working again. It's a java script I installed that tracks mouse movement for popup boxes. I would think since ios has no mouse, the java script would be kind of ignored, but instead, ios renders all anchor links useless. Don't know why, but I can disable the script for ios.

Hope this helps others in the future!

[TechDMex]

It was some nice js code from (below) for popup boxes. It allows popup boxes on hover or on click. Nice code and works well, just breaks ios safari links. I'll add some code to exclude the code for those browsers.

--------------------------------------------------------------------------
Code for link-hover text boxes
By Nicolas Honing
Usage: <a onmouseover="popup('popup content', width)">a link</a>
(width is optional - default is in CSS: #pup {width: x;},
escape " in content with &quot
Tutorial and support at http://nicolashoening.de?twocents&nr=8
--------------------------------------------------------------------------