Search code examples
cssioshyperlinkfrontendtouch

Problem with double tap on a website links on iOS

After 2 full days of trying out how to fix this, I am starting to give up. I am working on the website: https://www.lekm0.com which is using the wordpress theme Werkstatt by fuelthemes: https://werkstatt.fuelthemes.net/ they say that the double tap required on the menu, to open a link, is not a bug but a feature. After looking online it seems that this is the kind of implementation that is supposed to happen on iOS when you have a hover effect on a link with visibility or display.

Unfortunatly I don't want it since it seems a bit dumb to force people to double tap to open a link. I have deleted all the "hover" that I could find in the code but it is still happening on iphone and Ipad. No problem on Windows or Mac computer. Only on touch based screen like iphone or ipad.

If you any clue about this? thanks you!

enter image description here

Solution

  • Ok so probably very dirty but it works :

    <script>
jQuery(function(){
      jQuery('a').on('click', function (e) {
        if(jQuery(this).attr('href') !== '#' && typeof jQuery(this).attr('href') !== 'undefined' && !jQuery(this).closest('li').hasClass('menu-item-has-children')) {
          e.preventDefault();
          window.location.href = jQuery(this).attr('href');
        }
      });
    });
</script>

    _ Makes the links in the menu to open on first clic,

    Avoid the burger icon to reload the current page

    avoid the link with submenu to load the link and open the submenu

    drawback: apparently won't allow target blank links