Angular Flex-Layout-移动浏览器上的显示问题

Question

我目前仅在移动浏览器中遇到显示问题（我在装有Firefox或Chrome的Android 10中进行了测试。

今天，向下滚动时，顶部菜单栏消失了。 此行为导致我当前的代码出现显示问题，当我向下滚动菜单时消失，在屏幕底部出现白色的像素区域。 向上滚动时，菜单再次出现，并且白色像素区域减小。

我正在将Angular 10与Flex布局和Angular材质一起使用。

在我的 app.component.html 中：

<mat-sidenav-container fullscreen class="main-container"> 
  <mat-sidenav #snav>
    <mat-nav-list>
        <a mat-list-item routerLink="/home" routerLinkActive="active">Home</a>
    </mat-nav-list>
  </mat-sidenav>
  <div class="toolbar">
    <mat-toolbar color=primary fxLayoutAlign="space-between center">
      <div fxShow="true" fxHide.gt-sm="true" (click)="snav.toggle()">
        <button mat-icon-button><mat-icon>menu</mat-icon></button>
      </div>
    </mat-toolbar>
  </div>
  <router-outlet></router-outlet>
</mat-sidenav-container>

并在 app.component.scss 中：

.toolbar {
  width: 100%;
}

.mat-sidenav-container:-webkit-full-screen  {
  width: 100%;
  height: 100%;
}

.main-container {
  position:relative;
  top: 0;
  bottom: 0;
}

您对解决方法有任何想法吗？