Images on rollovers, image buttons or links disappear when you click them on a mobile device

March 4, 2014 at 2:04 PMMadestro

A customer of mine brought up a situation recently where some rollover buttons on a mobile site I made were not working as expected.

In particular, the image was disappearing when users clicked (or rather tapped) on the image link. The only thing left was the alt[ternate] text, while the new page loaded.

It turns out mobile devices have a 300ms delay between a physical tap and the firing of the "Click" event. This is done in order to detect a "double-tap".

After researching a little, I found a decent solution: FastClick.

FastClick is a simple JS library that takes care of this problem while avoiding any interference with your logic.

After downloading FastClick, include it on your html:

<script type="text/javascript" src="/Scripts/FastClick.js"></script>

Then hook it to the objects in question that produce the "Click" (what the user taps on). For instance, if you are using JQuery:

$(document).ready(function ()
  {
       FastClick.attach($('myAnchorTagId'));
   });

Voila!... no more missing images.

Posted in: Web Development

Tags: