3

On my page I have a particular sub-menu displayed when hovering a particular main menu item ("nos restaurants"). Everything works on desktop, but on iPad this sub-menu's items take 2 taps instead of one (one tap does nothing). Why?

HTML:

<div class='sub_menu_wrap'>
  <div class='menu_la_carte'>
    <?php wp_nav_menu( array('menu' => 'Menu La Carte' )); ?>
  </div>
  <div class='menu_nos_restaurants'>
    <?php wp_nav_menu( array('menu' => 'Menu Nos Restaurants' )); ?>
  </div>
</div>

JS:

$( '.restaurants_li, .menu_nos_restaurants' ).hover(
  function() {
    $( '.menu_la_carte' ).fadeOut(0);
    $( '.menu_nos_restaurants' ).fadeIn(0);            
  }, function() {
    $( '.menu_la_carte' ).fadeIn(0);
    $( '.menu_nos_restaurants' ).fadeOut(0);           
  }
);
$( '.sub-menu' ).click(function(event) {
  event.stopPropagation();
});
drake035
  • 3,955
  • 41
  • 119
  • 229

2 Answers2

1

You should check this topic: Fix CSS hover on iPhone/iPad/iPod

On touch device any element that has hover state requires 2 taps (first turns on hover state and second is like standard desktop click).

There is also a complete solution for CSS or jQuery hover elements. Look at this: iPad/iPhone hover problem causes the user to double click a link

And another link found, may be helpful: https://css-tricks.com/forums/topic/ipad-hover-effect/

Community
  • 1
  • 1
Damian Bartosik
  • 498
  • 6
  • 24
  • Thanks but if you check the page you'll see that the 2 taps I'm talking about are on top of the tap for the hover action - so it's 3 taps in total. And so your answer doesn't address my problem. In other words according to what you say "On touch device any element that has hover state requires 2 taps (first turns on hover state and second is like standard desktop click)" there should be 2 taps in total, yet there are 3 on my page: one for hover action, one that does nothing at all, and one that actually works and redirects. – drake035 Sep 01 '16 at 09:17
1

I think this is happening due to 300ms delay for mobile browsers.

According to Google:

...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

I faced same issue for one of my client project and for this I had used https://github.com/ftlabs/fastclick library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.

You can also try https://github.com/dave1010/jquery-fast-click

In same project I also faced double tap issue for dropdown menus and that was also due to 300ms delay.

Double tap issue was appearing in android browsers/devices so I detected the user agent and applied the a custom function to handle that issue this might be helpful for you. 

<?php 
 if (user_agent() == 'android') {
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\"";
    $homePage = "#";
} else {
    $handleClick = " ";
    $homePage = "index.php";
}
?>

<!--//Script to Handle menu for mobile devices-->
<script type="text/javascript">
//handle 300ms delay click in android devices
var clicks = 0;
function checkClicks(e) {
    clicks = clicks + 1;
    if (clicks == 2) {
        window.location = e;
    } else {
        //do nothing
    }
}
</script>

You can also try some available plugins to handle this issue if you face.

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

Mohsin Raza
  • 488
  • 1
  • 6
  • 12