Search code examples
htmliossafari

ios safari strange double-click/hover behviour

I recently made a (responsive) redesign for a website of mine.

Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):

If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.

This even works if you click say 7 links in a row and then the first one again.

This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.

With remote debugging I see nothing.

I don't even know where to start debugging this ...

Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.

Solution

  • I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:

    <html>
<head>
    <title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
    <style>
        body { font-size: 2em; } /* Only needed for a readable font-size */
        a { display: block; font-decoration: none;}
        a:hover { font-decoration: underline; }
    </style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>

</body>
</html>

    We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:

    if (!("ontouchstart" in document.documentElement)) {
  document.documentElement.className += " no-touch";
}

    with:

    .iamanobnoxiousiphonedevice *:hover{
  text-decoration: inherit !important;
}

    An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.