material-button unresponsive on iOS

[afpatmin]

Material-button has to be tapped twice before a trigger event is fired.

Device: iPhone X
Browser: Safari

[nshahan]

I don't see this problem on iOS. Do you have a reproduction?

[afpatmin]

I spoke too soon, the issue was I was using changeDetection.OnPush on an ancestor, closing

[muzuro]

I am facing same problem, I need to tap twice to call trigger on material-button . First click fire "hover" css change and only second fire "trigger" handler. Reproduced only on iOS.
I have versions:

  angular: ^5.1.0
  angular_components: ^0.10.0

iOS version: 11.3.1 (15E302), also have reproduced at 12.1 (16B92)
AppleWebKit: 605.1.15 Safari: 604.1

Here is same issue in angular/material2: angular/components#1316
Here is article desribing this problem: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

UPD. Also reproduced on iPhone XS

Currently I am using workaround. I am disabling hover css, for iOS, for every button:

@supports (-webkit-overflow-scrolling: touch) {
  @include no-button-hover('.action-button')
}

[jimmyff]

The issue is with the hover state - material-button, tab-button and material-fab all add an ::after on :hover state. setting it's display: none fixes the issue.

This is my workaround:

::ng-deep material-button, ::ng-deep tab-button, ::ng-deep material-fab {
  &:after {
    display:none !important;
  }
}