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

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, , 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.