（角度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

感谢您的光临！