Buttons need to be tapped twice in order to fire the click event (iOS)

[AndyOGo]

Are you reporting a bug or a feature?

• Bug

Expected Behavior

Buttons should trigger click upon single taps.

Actual Behavior

<axa-button>'s do only fire click upon second tap. It seems that only those <axa-button> are affected which use the <button> tag internally. It seems that:

1. first tap trigger :hover state
2. second tap triggers click event

Steps to Reproduce the Problem

• got to https://axa-ch.github.io/patterns-library/organisms.html
• or go to https://axa.ch/en/private-customers.html
• And click some buttons, seems those with <button> tags will not trigger instantly.

1. goto https://axa.ch/en/private-customers/offers/property-living/household-contents.html
2. scroll to next expandable container

Specifications

TL/DR: just paste results from https://www.whatsmybrowser.org/

Please provide any relevant information about your setup - os, browser, node, npm, etc.

• Browser: iOS Safari, Chrome on iOS

Same Bugs in other repos

• https://stackoverflow.com/questions/17710893/why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios
• Buttons need to be tapped twice in order to fire the click event (iOS) angular/components#1316
• On IOS Safari, md-button needs to click twice angular/components#1847
• button: needs to be tapped twice in order to fire the click event (iOS) angular/material#10257

Good explanations of what is going mad in iOS

• https://css-tricks.com/annoying-mobile-double-tap-link-issue/
• https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

Possible Solutions

• https://davidwalsh.name/ios-hover-menu-fix
• http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices/
• https://www.quora.com/How-do-I-disable-the-hover-CSS-rule-for-iPhone-and-iPad-touch-device-browsers
• https://www.quora.com/How-do-I-disable-the-hover-CSS-rule-for-iPhone-and-iPad-touch-device-browsers
• https://stackoverflow.com/questions/30102792/css-media-query-target-only-ios-devices
• http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

[AndyOGo]

may this line is causing the issue?
https://github.com/axa-ch/patterns-library/blob/develop/src/components/m-button/mixins/_button.scss#L204

[AndyOGo]

@LucaMele
Basically the issue is that Apple decided years ago, that they want to make sure :hover content is visible. Hence they went for 1. tap -> :hover, 2. tap -> click.

So far I found the following possible fixes:

• Using CSS @supports() to target iOS (problem it may only work for iOS 9+)
• Utilize interaction media queries @media (hover: hover/none) { ... } (problem they aren't dynamic and browser support is grap 😱)
• Add is-touch / no-touch root classes by Javascript (problem we want to deliver zero specificity and this needs special JS code)
• Handle touch events by ourselves and trigger click artificially -> tap event PR Feature/add tap event #290
• Try to avoid invisible ::after content if not :hover

[AndyOGo]

@LucaMele
this should be fixed, right?

[LucaMele]

yes i think so.. but we have not tested it yet on ACC right?

[AndyOGo]

Okay, on my iPhone it's still broken at ACC.
Are we sure that it's released and that all cache layers are pruned?
Because I tested it really heavy...

[LucaMele]

did we merge it on master the fix?

[AndyOGo]

Sure, as a hotfix and it was tagged too as 2.0.1-beta.121:

[AndyOGo]

I just pruned the caches at ACC and it works now on my iPhone 😃

[AndyOGo]

Released and working at prod of axa.ch