(угловой 6) Графическая ошибка при открытии правой сиденав

Question

Я использую 2 sidenav 1 влево и 1 вправо, они имеют абсолютно одинаковый базовый код и случайную ошибку sidenav случайным образом, когда я ее открываю.

Эта ошибка появляется, только когда sidenav имеет набор modeна over и когда позиция в конце, левый sidenav работает отлично.

<mat-sidenav-container class="example-container">

      <mat-sidenav #sidenav mode="over">
        Sidenav content
      </mat-sidenav>

      <mat-sidenav #right mode="over" position="end">
        Sidenav content
      </mat-sidenav>

      <mat-sidenav-content>
        <header>
          <topbar (changeleftside)="sideBarLeftEvent($event);" (changerightside)="sideBarRightEvent($event);"></topbar>
       </header>
        <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
        <p><button mat-button (click)="right.toggle()">sid.toggle()</button></p>
      </mat-sidenav-content>

</mat-sidenav-container>

и просто переход в css:

mat-sidenav 
{
     transition: 0.6s all;
}

У меня есть эта проблема на Chromeи Firefox работает лучше, но иногда появляется.

Вот видео, где вы можете увидеть эту ошибку: https://www.youtube.com/watch?v=SMZXid5eYWY&feature=youtu.be

спасибо за ваше время!