Button click event does not fire on first tap/ click in Safari 13

[LauraTGail]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/button-issue-safari13

Resolved by removing fxLayout="column": https://stackblitz.com/edit/button-issue-safari13-no-fxlayout

Steps to reproduce:

1. Open Stackblitz in Safari 13 on iPad, MacBook or iMac.
2. Scroll down to buttons at the very bottom
3. Click button
4. Watch button be cut off at the bottom of the screen

Expected Behavior

Button should fire click event, in case of example Stackblitz a snack bar should appear to show you the click event fired correctly.

Actual Behavior

Click event is not fired first time, page jumps, cutting buttons off the bottom. No snack bar is visible in the example Stackblitz.

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Safari 13
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[DsanchezPerez]

Hello, is there any more information on this issue? I am using Angular 14 with Material and the iOS users are having this issue with quick tapping buttons. I do have the Mat-Ripple turned off on all buttons and here is a sample of a button implementation.

`

<button mat-raised-button class="app-btn" color="primary" type="button" [disabled]="newCustomer||formGroup.invalid || !formGroup.dirty" (click)="onAddAccount()"> Add Account `

NOTE: Would rxjs be a work around for handling the Click event using fromEvent.subscribe(..........)?