mat-sidenav-container 的 CSS 在 safari 上损坏

Question

I am using a mat-sidenav-container. My codes run properly on İE, Chrome, Firefox. but broken only on safari; app-header must be on top and fixed.but it doesn't seem on top. I think this error is about the position:absolute. but I can't solve

app.commponent;

<mat-sidenav-container [ngClass]="{'container':(!currentUrl && userAuth)}">
  <mat-sidenav [ngClass]="{'sidenavUser':(isExpanded && !currentUrl && userAuth),
                            'sidenavExpanded':(!currentUrl && userAuth && !isExpanded && !mobileQuery.matches)}"
   #sidenav role="navigation"
   [mode]="mobileQuery.matches ? 'over' : 'side'" 
   [(opened)]="!mobileQuery.matches && userAuth "
   fullscreen>

    <app-sidenav [mobileQuery]="mobileQuery.matches"  [userAuth]="userAuth$" (closeSidenav)="sidenavClose($event)"></app-sidenav>
  </mat-sidenav>

  <mat-sidenav-content>
    <app-header [ngClass]="{'header':(!currentUrl && userAuth)}"  [userAuth]="userAuth$"
      (sidenavToggle)="sidenav.toggle()"></app-header>

    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.css

mat-sidenav{
  width: 250px;
  z-index: 1000;
}

  .sidenavUser {
    width: 250px;
    position: fixed;
    top:80px;
    bottom: 0px;
    z-index: 1000;
  }
  .sidenavExpanded{
    width: auto;
    position: fixed;
    top:80px;
    bottom: 0px;
    z-index: 1000;
    }

  mat-sidenav-content{

      height: 100%;
  }
  mat-sidenav-container{
  background-color: rgb(246, 246, 248);
  width: 100%;
  margin: 0;
  min-height: 1000px;
  }


  .container {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color:transparent;

  }

  .menuButton{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;

  }

.container and header position absolute not work. my toolbar is unvisible first.

toolbar.css

.toolbarTop{
  background-color:transparent;
  position: fixed;
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 2;
  margin: 0;

} 
.toolbarOffsetY{
  background-color:rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 1000;
  margin: 0;

}
.toolbarUser{
  background-color:rgba(0, 0, 0, 0.5);
  position: -webkit-sticky;
  position: sticky;
   /* For macOS/iOS Safari */
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 1000;
  margin: 0;

}

Answer 1

I could solve this problem. I changed position of app-header. because when app-header was inside mat-sidenav-container, the safare gave bugged. this my new code;

<div fxFlex>
**<app-header  [userAuth]="userAuth$"
      (sidenavToggle)="sidenav.toggle()"></app-header>**
<mat-sidenav-container autosize>
  <mat-sidenav [ngClass]="{'sidenavUser':(isExpanded && !currentUrl && userAuth),
                            'sidenavnotExpanded':(!currentUrl && userAuth && !isExpanded)}"
   #sidenav role="navigation"
   [mode]="mobileQuery.matches || currentUrl  ? 'over' : 'side'" 
   [(opened)]="!mobileQuery.matches && userAuth "
   fullscreen>

    <app-sidenav 
    [mobileQuery]="mobileQuery.matches"
    [currentUrl]="currentUrl" 
    [userAuth]="userAuth$"
    (closeSidenav)="sidenavClose($event)"></app-sidenav>
  </mat-sidenav>

  <mat-sidenav-content>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>
</div> 

and added css

mat-sidenav-container{
  position: unset;
}

it worked.