时间戳

首页 > 解决方案 > Angular mat-sidenav 未在 Safari（comp 或移动设备）上显示

javascript - Angular mat-sidenav 未在 Safari（comp 或移动设备）上显示

问题描述

我使用 Angular 材质创建了一个侧导航，它只显示在 chrome 上而不是 safari 上。我到处寻找解决方案，但似乎找不到！这是我的html：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" [fixedInViewport]="true"  [attr.role]="(screenWidth<769) ? 'dialog' : 'navigation'"
               [mode]="(screenWidth<769) ? 'over' : 'side'" [opened]="!(screenWidth<769)">
    <mat-toolbar class="logo-toolbar">
      <div class="navbar-logo">
        <img class="logo" src="assets/img/icons/logo-white.png">
      </div>
    </mat-toolbar>
    <mat-nav-list>
      <div class="lateral-navbar-item" *ngFor="let item of navbarList" [ngClass]="{'active': router.url.includes(item.routerLink)}"
           [routerLink]="item.routerLink">
        <img height="32" width="32" [src]="router.url.includes(item.routerLink) ? item.activeImgUrl : item.imgUrl">
        <span>{{item.content}}</span>
      </div>
      <div *ngIf="screenWidth < 769" class="lateral-navbar-item logoutButton" (click)="logout()">
        <img height="32" width="32" src="../assets/svg/lateral-navbar-icons/log-out.svg">
        <span>Logout</span>
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar *ngIf="screenWidth < 769" class="collapsedSideNav">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="screenWidth<769">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

有没有人遇到过这个问题/有没有人设法解决这个问题？

编辑 - 我应该补充一点，这些项目只是不可见。如果我设法找到它们并单击它们，它们会将我引导到正确的页面！

标签： javascripthtmlangularangular-material

解决方案

我有同样的问题，可以使用下面的方法解决。（角垫 - 5）

.mat-drawer-container{
      position: unset!important;
 }

推荐阅读