Why/when do I have to tap twice to trigger click on iOS

Question

Ok I feel like I\'m crazy...

I\'m looking at Mobile Safari on iOs 6.0. I can\'t seem to establish any rhyme or reason as to when tapping on an element will trigger

Answer 1

my solution was to remove the :hover state from the css, and when you think about it, mobile browsers should not have :hover state, since there is no hover..

if you want to keep the hover state on desktop, you can use media query, like so:

.button {
    background: '#000'
}

@media (min-width: 992px) {
    .button:hover {
        background: '#fff'
    }
}

Answer 2

I solved this issue by first detecting if it was an iphone, then binding the mouseup event to the function I was trying to call.

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){
        ...
    }
}

I tried other events but mouseup seemed to work best. Other events like touchend were firing even if the user was trying to scroll. Mouseup doesn't seem to get fired if you drag your finger after touching.

Credit David Walsh (and ESPN) for the iPhone detection. http://davidwalsh.name/detect-iphone

Answer 3

I had this same issue. The simplest solution is not to bind the 'mouseenter' event on iOS (or any touch enabled target platform). If that is not bound the hover event won't get triggered and click is triggered on the first tap.

Answer 4

You need @media (hover) { /* Your styles */ }

As far as I can tell, this problem in various forms is still present.

In 2019, most, if not all of the above cases can be now ameliorated using a CSS only solution... it will however, require some stylesheet refactoring.

label {
  opacity:0.6  
}

label input[type=radio]:checked+span {
  opacity:1
}

.myClass::before { } /* Leave me empty to catch all browsers */

a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }



/* Your styles */
@media (hover) {
  a:hover { color: red }

  .myClass::before { background: black }

  label:hover {
    opacity:0.8
  }
}

You can read in more detail here why Fastclick, :pseudo, <span>, just targeting "desktop" resolutions and first tap is hover and second tap is click are all fixed using @media (hover): https://css-tricks.com/annoying-mobile-double-tap-link-issue/

:hover doesn't offer the clarity it once did as stylus input, touch desktops and mobile have a disparate interpretation of the notion.

Answer 5

The display:none; solution mentioned above works on iOS (not tested on later than 9.3.5), but not on Android.

A hacky css-only solution is to hide the link below the element using a minus z-index and to bring the link up to a positive z-index on :hover or first-touch (with a small transition delay). I guess one could achieve the same result with css translate instead of z-index. Works on iOS and Android.

In this way you can display a hover effect on a link on a touch-screen device with the first tap without activating the url until a second tap.