I am encountering an issue with my mat-sidenav-container. While my code functions correctly on IE, Chrome, and Firefox, it appears broken only on Safari. The app-header should be fixed at the top, but it does not display as expected. I believe this error is related to the position:absolute property, yet I am unable to resolve it.
app.component;
<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;
}
The issues persist with the positioning of .container and header being set to absolute which results in my toolbar being initially invisible.
toolbar.css
.toolbarTop{
background-color:transparent;
position: fixed;
top: 0;
height: 80px;
z-index: 2;
margin: 0;
}
.toolbarOffsetY{
background-color:rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
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;
height: 80px;
z-index: 1000;
margin: 0;
}