Two clicks required when only one should be needed on iPad/iPhone

Question

I'm working on a site which is supposed to support both mobile and desktop devices. I'm using jquery-address plugin to make an image gallery which can use hash tags to be deep linkable.

But I'm noticing a problem in ipad simulator with iOS5 and iphone 5 where I have to click a category within the image gallery twice on the image gallery to get the event to work properly. It works fine on chrome/safari/firefox on OSX with one click.

So far I've only seen this on iphone/ipad. Any ideas about why desktop browsers work fine with one click, but iOS on ipad/iphone need two? I'm at a loss here. I can't tell if the problem is with my markup/javascript or an obscure bug in jquery-address/safari on iPad/iPhone.

Answer 1

I'm pretty sure this is due to your markup and having a hover state on .gallery-category:

.gallery-category:hover {
  color: white;
  cursor: pointer;
}

iOS doesn't support :hover in the normal way because there's no way to detect a hover state without a mouse. It usually sorts itself out on straight up a:hover states, but I'm guessing because your markup is a bit complicated (and there's a :hover state on the parent) it's causing it to break.

I think if you replace the above snippet to work on

.gallery-category a:hover {...

it will fix it (I haven't tried it on your code though)