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

[binarious]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

A tap on the button should fire the click event.

What is the current behavior?

The first tap highlights the button. The second tap fires the click event.

What are the steps to reproduce?

Click on the sidenav icon on an iPhone or iPad: http://material2-test.firebaseapp.com/

Which versions of Angular, Material, OS, browsers are affected?

• Angular 2.0.0
• Material Alpha 8-2
• iOS 10.0.1
• Safari

[spock123]

Is the problem the same in Chrome for iOS?
As far as I know, Apple doesn't allow for other browser engines on the platform?

[binarious]

Same with Chrome on iOS.

[gjoang]

I can confirm the same experience iPhone 6s, IOS 10, Mobile Safari - The first tap highlights the button. The second tap fires the click event.

[ccarrasc]

I see the same, but only for md-icon-button.

[alexciesielski]

+1, md-icon-button (sidenav toggle) needs two taps to open the sidenav on Safari, iOS 10, iPad

[mfodor]

One workaround (maybe a not bad solution) is to have a CSS media query that removes the hover change(s) on mobile devices. In that case there will be no reason for the mobile browsers to fire the hover changes first.

[sunshineo]

@mfodor How to do that?

[pcwa-ahendricks]

@sunshineo The following worked for me...

Download a build of Modernizr link to a build. The most important step is to include the 'Touch Events' browser feature. My modernizr-config.json contains:

{
  "minify": true,
  "classPrefix": "mod-",
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/touchevents"
  ]
}

Then, tell SystemJS or Webpack where to find the generated modernizr.js file.

In my Angular2 component that contains my [md-icon-button] for my sidenav I define the following SCSS selectors.

// using Modernizer CSS classes to detect if browser supports the W3C Touch Events API
:host-context(.mod-touchevents) [md-button]:hover::after, [md-icon-button]:hover::after {
    content: none;
}

[mfodor]

@sunshineo Here is a Plunkr showing my idea. It's without having a 3rdparty like modernizr, however, I can encourage you to use that. Also my solution is too simple so it not recognizes whether it's a touch device or just a really narrow window on a PC. So @pcwa-ahendricks 's solution looks much better.

[alexciesielski]

Found a blog post explaining the issue
https://css-tricks.com/annoying-mobile-double-tap-link-issue/

[sunshineo]

Thank you @mfodor . Actually @pcwa-ahendricks 's solution is too complicated for me.
But ultimately, I hope this get fixed ASAP.

[jimarthurnilsen]

md-raised-button fires on a single click on iOS chrome/safari.
md-icon-button and md-button requires 2 clicks