Skip to content

Instantly share code, notes, and snippets.

@PocketNinjaDesign

PocketNinjaDesign/ios-double-tap-button-issue.scss

Last active August 22, 2018 21:42
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PocketNinjaDesign/689e16e412a88dfd36dd08b26bebcacf to your computer and use it in GitHub Desktop.
Save PocketNinjaDesign/689e16e412a88dfd36dd08b26bebcacf to your computer and use it in GitHub Desktop.
Download ZIP
The Annoying Mobile Double-Tap Link Issue IOS fix CSS
Raw
ios-double-tap-button-issue.scss
/*
The issue apparently according to
https://css-tricks.com/annoying-mobile-double-tap-link-issue/
is that having a hover causes safari ios to activate the hover first and
then the second click activates the link.
I came across this issue with a link that had a JS click on it but
had to double click. Thank you Mozilla for the solution
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*/
a.close {
background: #fc0;
@media (hover: hover) {
&:hover {
background: #f00;
}
}
}
@natedunn
Copy link

Definitely an interesting find. Though, sadly still not supported by IE, but more importantly, by Firefox at all. :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment