New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two clicks required to select items on iOS devices #315

Closed
david-w opened this Issue May 12, 2016 · 7 comments

Comments

Projects
None yet
3 participants
@david-w

david-w commented May 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes May 12, 2016

Owner

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.

Owner

mmistakes commented May 12, 2016

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.

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas May 30, 2016

Contributor

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.
Contributor

jhabdas commented May 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes May 30, 2016

Owner

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

Owner

mmistakes commented May 30, 2016

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

@mmistakes mmistakes changed the title from Two clicks required to select items on IOS devices? to Two clicks required to select items on iOS devices May 30, 2016

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas May 30, 2016

Contributor

No need, unless you want to change the breakpoint: #330 😄

Contributor

jhabdas commented May 30, 2016

No need, unless you want to change the breakpoint: #330 😄

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes May 31, 2016

Owner

Fixed in MM 3.2.1 15f4ac9... I think 😉

Owner

mmistakes commented May 31, 2016

Fixed in MM 3.2.1 15f4ac9... I think 😉

@mmistakes mmistakes closed this May 31, 2016

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas May 31, 2016

Contributor

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

Contributor

jhabdas commented May 31, 2016

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

@david-w

This comment has been minimized.

Show comment
Hide comment
@david-w

david-w Jun 9, 2016

Thanks so much for all your work!

david-w commented Jun 9, 2016

Thanks so much for all your work!

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment