Ever wonder why some links on mobile browsers require you to click them twice?

If you have ever developed a responsive website, you have probably run in to an issue where you have to click a link twice to actually go to next page. Usually the first click will trigger the “hover” effects that you would typically see when you mouse over the link on a desktop browser, and the second click will then send you on your way.

It’s not all browsers that do this. Most Android browsers (such as chrome) go to the link on the first click. iOS browsers, on the other hand. love to show off the hover effects regardless of what device you are on.

Sometimes having to click twice may be a desired effect. Perhaps you have a large menu with a submenu that normally appears on a mouse click. You would want the first click to open that sub menu in order to access the child links. While you would technically want the double click functionality, the reality is that you should be employing mobile specific menus via media queries or some other detection mechanism.

Let’s dive in to a basic case study:

If I have a link that, when hovered over, will unhide another element inside the link:

<a href="http://www.google.com" class="mylink">
   Click Me!
   <span class="hide">Boo!</span>
</a>

Your less styles:

.mylink {
   .hide { display:none; }
      &:hover{
         .hide { display:inline; }
      }
   }
}

This will effectively create a link that scares you when you hover over it. Now if you were to fire up safari on a mobile device and click it, it should also scare you instead of taking you to the link destination.

The Solution

The easiest workaround for this without getting in to third party javascript libraries is to essentially unset the hover effect using a media query for a certain width. If there is no “hover” effect then there won’t be a double click involved to follow a link.

@media (max-width: 920px)    {
   .mylink:hover{
      .hide { display:none !important; }
   }
}

Now you are back to having cross browser, mobile friendly links that give you the expected desktop and mobile experience!