Safari上不显示Angular Mat-Sidenav（comp或mobile）

Question

我使用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> 

有人遇到过这个问题吗？有人设法解决了这个问题吗？

编辑-我应该补充一点，就是那里的物品不可见。如果我设法找到它们并单击它们，它们会将我路由到正确的页面！

Answer 1

我用“ position：unset！important;”解决了一些不同（但类似）的问题。对于“ .mat-drawer-container”，这是我的模板：

<mat-toolbar class="header top-panel">
// content...
</mat-toolbar>
<mat-sidenav-container class="container">
    <mat-sidenav mode="side" class="sidenav">
    // content...
    </mat-sidenav>
    <mat-sidenav-content>
    // content...
    </mat-sidenav-content>
</mat-sidenav-container>
<mat-toolbar class="footer">
// content...
</mat-toolbar>

角度9。还有问题。 mat-tooltip仅在chrome + iPhone加载垂直布局中不可见。并且仅当从书签中打开链接或从chrome链接中打开链接后重新加载。

• 在iOS 13上关闭并打开Chrome浏览器，可以很好地重新加载网站。
• 写域名和网站（应用程序）可以很好地重新加载
• 相同的iOS /设备，但使用Safari-一切正常
• Mac book pro所有浏览器（Safari，Chrome，Yandex）都可以
• Chrome中的各种设备模拟器（来自macbook）-一切正常
• 将垂直布局更改为横向，可以使垫子工具提示回来，并且它仍然存在

所以。垫子抽屉容器位置的未设置解决了该问题，但通过自动布局其他元素触发了其他问题。

正在恢复。问题只有iOS 13 + iPhone + Chrome。如您所知，没有适用于Chrome的调试工具（iOS）。无法测试！

简而言之。部分解决。但我正在寻找更深层的解决方案。也许smdy找到了-请在这里分享。

该袋仍然存在“位置：未设置！重要；”但现在不是那么关键。轻按一下即可使用工具栏中的菜单。

Answer 2

我遇到了同样的问题，可以通过以下方法解决。 （角垫-5）

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