5

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.

Dave
  • 6,141
  • 2
  • 38
  • 65
  • Tried it on an iPad without JS : same problem. So it's the way Safari Mobile handles #. I would try with absolute url. – mddw Sep 26 '12 at 14:57

1 Answers1

4

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)

adnrw
  • 1,038
  • 6
  • 13
  • I'll give it a shot later today. – Dave Oct 05 '12 at 13:44
  • Thanks for heading me in the right direction. It turned out that I had a `mouseleave` event handler that was making me double-tap on an iPad when I wanted a single-tap action. – Jasper May 07 '14 at 18:48