joeldbirch / superfish

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.
Other
913 stars 314 forks source link

iPad ios 13.1 menu item link problem #182

Open pitcock opened 4 years ago

pitcock commented 4 years ago

on my ipad with ios 13.1, the submenu can be opened with a touch of the first level menu item. however, the link on the first level menu item doesn't work then.

stephangrass commented 4 years ago

Hi. Same problem here.

You have to tap 3 times quickly ... but this ist not really a solution ;-)

The problem occures on ipads with iOS greater than 13.x.

joeldbirch commented 4 years ago

Thank you both for the report. I imagine the issue is due to Apple adding mouse support to iOS Safari. Unfortunately, I won’t have time to look at a fix until mid December at earliest.

I have an interesting CSS fix in mind. In fact, I don’t use Superfish anymore as I find everything with pure CSS, nowadays. Hoping to chance to put together a pure CSS example with feature parity so we can cut the jQuery ties once and for all.

stephangrass commented 4 years ago

Hi Joel, thanks for your response. I think pure css will be a solution. But I use superfish in several websites and it will be terrible to change them all.

For a quick & dirty solution this will work (I think):

Add

if(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) { return this; }

at the beginning of touchHandler = function (e)

Hoping to chance to put together a pure CSS example with feature parity so we can cut the jQuery ties once and for all.

Joel, if you will/can do this (or fix superfish seriously), I will help by sponsoring.

Stephan

pitcock commented 4 years ago

this solution works for me. many thanks. a pure css solution would of course be future-proof, but i like the hoverintent integration very much.

zhrance commented 4 years ago

Thank you both for the report. I imagine the issue is due to Apple adding mouse support to iOS Safari. Unfortunately, I won’t have time to look at a fix until mid December at earliest.

I have an interesting CSS fix in mind. In fact, I don’t use Superfish anymore as I find everything with pure CSS, nowadays. Hoping to chance to put together a pure CSS example with feature parity so we can cut the jQuery ties once and for all.

Really looking forward for your pure CSS solution. These days I was hesitating to keeping using Superfish or create my own pure CSS solution. With this confirmation I start coding some pure CSS. If you want to I can share my code.

twisk commented 4 years ago

+1

renderorange commented 4 years ago

We see this issue also on iOS 13.5.1 for iPhone, but the fix noted above in issuecomment-549307916 doesn't appear to work.

My best guess is the issue is related to the timeout not being reset for iOS devices. As noted previously, if you click 3 times very quickly you can get the link to work, but it's not a normal speed most people will use their phones.

If you remove the iOS specific logic from the out function, it appears to work correctly.

out = function () {
    var $this = $(this),
        o = getOptions($this);

    clearTimeout(o.sfTimer);
    o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
},

I tried to find comments in the commit history explaining why the iOS devices don't have the same logic to clearTimeout and setTimeout, but wasn't able to find much. Any insight to why iOS is set to operate differently would be helpful.

joeldbirch commented 4 years ago

I don’t remember why it was so important to prevent applying the delay to iOS, but it was surely a product of it not needing hover behaviour. Now iOS supports pointers, I imagine Apple have shuffled a bunch of things around, no doubt affecting Superfish’s ancient functionality.

stevengliebe commented 4 years ago

Thanks @renderorange, did the trick for me. Funny thing is that I only saw the issue on two out of five implementations of Superfish (all same version, checking with Chrome on iPad). There might be a factor additional to iOS.

wpexplorer commented 4 years ago

None of these solutions seem to be working for me (using superfish+hoverIntent). Any other ideas?

stevengliebe commented 4 years ago

@wpexplorer This is my modified version. Didn't see it working until cleared cache and reloaded a few times.

https://demos.churchthemes.com/jubilee/wp-content/themes/jubilee/js/lib/superfish.modified.js

wpexplorer commented 4 years ago

@stevengliebe - I actually got it working with some changes, I'll check yours out though to compare. Thanks!!

kimisgold commented 3 years ago

I'm still having this issue on iPadOS 14.6. I've tried both the latest version of superfish and @stevengliebe's modified version to no avail. You can only click through to the top level link by tapping thrice quickly. Can anyone provide guidance?

wpexplorer commented 3 years ago

@kimisgold - This is what I use with success: https://gist.github.com/wpexplorer/95ad7b5e5779fc68a8816c323f5f9976

kimisgold commented 3 years ago

@wpexplorer I cleared cache and used your gist. Ideally a second click would click through to the top link destination: your modification now enables click through on the third click even at slower tap speeds.

wpexplorer commented 3 years ago

@kimisgold - I don't know how your testing (how slow your taps are) but for me it works on the second tap not the 3rd when tapping on it normally.

(edit, I'm also using the HoverIntent plugin...forgot to mention)

djmolny commented 2 years ago

@kimisgold - This is what I use with success: https://gist.github.com/wpexplorer/95ad7b5e5779fc68a8816c323f5f9976

+1. Thanks!