iPad menu "click" issues

Hi There

I have a project that uses 6.3.1.

Viewing the site on an iPad the responsive drilldown menu doesn’t work as expected. Sub-menu items seem to require two taps to activate a link. It’s almost like the first tap sets focus on the link and the second tap fires the navigation. I can’t find anything in the documentation that might alter this behaviour.

I know this is an issue on an iPad but, since I’m testing on BrowserStack, I’m not sure it if’s an issue on any other tablets.

I would appreciate any ideas or suggestions!

Thanks

Paul

Hi,

please upgrade to 6.6.1 and try it again.
We do not provide backported fixes for such old versions.

Hi Daniel

Respectfully, I’m not asking for a “fix” but someone might have a suggestion as to whether there is something I can do differently.

Or even, if it’s a known bug, that I MUST upgrade - that would be different.

I have just day figured out that something is going on in the Foundation world… So many 11 days after your question, you’ve possibly resolved it already, in one way or another. I suddenly noticed something akin to what you are talking about too, and resolved it by adding fastclick.js to my pages. I don’t know how or why it works. But your not asking that I guess. You just want the double-click thing to abate. I hope this helps you get to where you want to be.

1 Like

Yes, this is a OS specific think (tap vs click). We embedded fastclick in previous releases.

@lamontpaul I think that resolves a different issue. My issue is that I must tap twice to activate a link, rather than there being a lag in firing the click, which is what I believe fastclick resolves.

After some digging on stackoverflow I found a reference to this ios hover issue, which I believe is what is causing my grief.

My fix involved implementing touchstart and touchend handlers and it’s working nicely.

But many thanks for taking the time to reply; much appreciated.

this could work, assuming you are in a jQuery setting.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link.

1 Like

@Lewis-H yeah my original solution started out based on touchend, but that erroneously triggers navigation at the end of a ‘tap and hold’ (used if you just want the context menu to appear). So it gets a little more complex than that, requiring touchstart, touchend and capturing the time difference between the two (in my solution anyway).

Many thanks for your input.

Probably related: https://github.com/foundation/foundation-sites/issues/11865

1 Like

I did the same thing today, it worked. Thanks for sharing!