Safari Mobile Double Tap Issue

[lukefinsaas]

Hey folks,

I’m running into this strange issue with the double tap / pseudo element / hover state issue with iOS Safari:

The Annoying Mobile Double-Tap Link Issue | CSS-Tricks

Solving The Double Tap Issue on iOS Devices

If you have an iPhone you can see if for yourself: http://redcow.tela.com/

Try clicking on any of the various menus. You’ll see that the image loses a little transparency and then stalls.

Do you have a suggestion for how to deal with this? CSSMenus suggests the below, but perhaps you have a solution somewhere?

Thanks!

Luke Finsaas

$(document).ready(function() {
  $("a").on("click touchend", function(e) {
    var el = $(this);
    var link = el.attr("href");
    window.location = link;
  });
});

[christian]

Hey Luke,

The script you posted should do the trick. Just change $(document).ready(function() { to jQuery(function($) { to make it work in WordPress. Regretfully, we do not have resources to investigate the best solution for this as support staff. If you discover a native feature of the theme is doing this, we could post this in our issue tracker. If it’s from a custom code though, you would need to hire an expert developer who has specific experience developing for the Safari browser.

Thanks.

[lukefinsaas]

Hi @christian_y,

I think it is a native function of the theme + a quirk of Safari. The issue is that for any linked images / accordion / etc. that have any sort of style that is revealed by :hover, Safari will display that style before taking the user to the link. Users then have to tap the link a second time to navigate to the link.

Compounding the issue is that double tap is also zoom on Safari iOS so you can get caught in this insane zooming-tapping nightmare… Frustrating.

With some testing, I was able to determine that the new elements work somewhat better on Safari. I wasn’t able to get the javascript to work, but would prefer to find a non-JS way to solve the issue.

Will keep searching and post any solutions here!

Thanks.

[christian]

Hey Luke,

According to the article you posted, the issue will only happen if an element uses a pseudo class.

It would be best you give us an example of an element in the theme so we could post this in our issue tracker so our development team could check the element in Safari.

Thanks.