Minimal-mistakes: Two clicks required to select items on iOS devices

[david-w]

Your Jekyll theme is amazing! Thank you.

Sorry if this has been addressed before. I have to click twice on menu items and links on IOS devices.

Seems like this autocomplete bug? https://bugs.jqueryui.com/ticket/10544

Some ideas here as well. http://stackoverflow.com/questions/25286685/autocomplete-requires-you-to-click-twice-in-ios-after-update-to-1-11-0

[mmistakes]

The theme isn't using jQueryUI so that's likely not the culprit.

I believe this is related to the touch behavior of iOS devices to distinguish between "clicks" and touches. You can use a polyfill like FastClick to get around it.

[ghost]

The culprit is indeed iOS behavior and is summarized in detail by Nick Zakas. FastClick was designed to overcome the the 300ms delay for mobile touch events and seems like the wrong approach to fix this unexpected behavior. Now that we know what's causing the problem we can address it.

Here are two workable solutions:

• Remove or comment out L237-L241 of _navigation.scss and then npm i && npm run build:css. This is the easiest approach but, unfortunately, causes the underline animation to stop functioning both on desktop and mobile.
• Alternatively, and as pointed out in the comments on Nick's post, one can use feature detection to determine if the browser supports touch events and, if they do, don't show the animation at all. Not showing the animation on touch devices feels like the best approach given current implementation.

[mmistakes]

Thanks @jhabdas for digging up this info. Will have to see what I can come up with.

[ghost]

No need, unless you want to change the breakpoint: https://github.com/mmistakes/minimal-mistakes/pull/330 😄

[mmistakes]

Fixed in MM 3.2.1 15f4ac96417621fa71b397f44b935ebf3abca6c1... I think :wink:

[ghost]

Confirmed fixed. Thanks for including this enhancement. Having a blast porting over from HPSTR.

[david-w]

Thanks so much for all your work!