title: Performing a fast swipe causes button to not react to first click
body: <p>I am building an angular application, with a responsive navigation using the angular navbar. To let the navigation feel really smooth i use hammer to enable swiping right to show, and swiping left to hide the menu. </p>
  
  <p>However, when the swiping to the right is performed fast (not super fast, but normal speed on a smartphone), the navigation buttons don't react to the first click on them, but only to the second. </p>
  
  <p>If the swipe is executed slowly the buttons work as intended. If toggled by the menu toggle button it also works as intended.</p>
  
  <p>Example gif (first slow, then fast):
  <a href="https://i.stack.imgur.com/c2bYe.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c2bYe.gif" alt=""></a></p>
  
  <p>This bug does NOT occure if you just resize the browser windows. Only if you use "toggle device toolbar" in chrome and select a device" and on my android 9 device with chrome for android.</p>
  
  <p>the app.component.html:</p>
  
  <pre><code>&lt;mat-sidenav-container&gt;
    &lt;mat-sidenav #sidenav fxLayout="column" mode="side" opened="false" class="hidelarge sidenav"&gt;
      &lt;mat-nav-list fxLayout="column"&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/home', 'link': true}"
          [routerLink]="['/home']"&gt;Home&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/maturanten', 'link': true}"
          [routerLink]="['/maturanten']"&gt;Maturanten&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/fotos', 'link': true}"
          [routerLink]="['/fotos']"&gt;Fotos&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/musik', 'link': true}"
          [routerLink]="['/musik']"&gt;Musik&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/raumaufteilung', 'link': true}"
          [routerLink]="['/raumaufteilung']"&gt;Raumaufteilung&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/ballordnung', 'link': true}"
          [routerLink]="['/ballordnung']"&gt;Ballordnung&lt;/a&gt;
        &lt;a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/kontakt', 'link': true}"
          [routerLink]="['/kontakt']"&gt;Kontakt&lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content fxFlexFill  (swiperight)="sidenav.open()" (swipeleft)="sidenav.close()" &gt;
      &lt;app-header (navToggle)="sidenav.toggle()"&gt;
  
      &lt;/app-header&gt;
      &lt;main class="minheight"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/main&gt;
      &lt;app-footer&gt;
  
      &lt;/app-footer&gt;
  
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>And in my app.module.ts:</p>
  
  <pre><code>...
  export class MyHammerConfig extends HammerGestureConfig {
    overrides = &lt;any&gt;{
      // override hammerjs default configuration
      'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
      'pinch': { enable: false },
      'rotate': { enable: false },
      'pan': { enable: false },
      'tap': { enable: false },
      'press':{enable:false},
      'doubletap':{enable:false},
    };
  }
  ...
  providers: [
      { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
    ],
  ...
  </code></pre>
  
  <p>I importet hammer in my main.ts file like this:</p>
  
  <pre><code>import 'hammerjs';
  </code></pre>