Components: mat-sidenav broken on Safari

[ssgriffen]

Bug, feature request, or proposal:

The mat-sidenav appears below the content on 6.3.2. I used the cli sidenav generator to produce the sidenav.

What is the expected behavior?

That the sidenav drawer appear over my site on Safari.

What is the current behavior?

What are the steps to reproduce?

Test a sidenav on Safari

What is the use-case or motivation for changing an existing behavior?

Menu

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.3.0 >

Is there anything else we should know?

[AndrewMilko]

I think that I have a similar problem. After the update, angular-material 6.3.0 -> 6.3.2, block
does not expand after the block collapses.
Having looked through the css-code in the browser, I noticed that when the block was rolled up,
the property:
margin-left: 0px;
was not added to the block .
    
But it was added with an earlier version of the angular-material (6.3.0).

[ssgriffen]

@AndrewMilko I just tried adding margin-left: 0 to the mat-sidenav-content and that didn't help. This problem is only on Safari.

[jaruesink]

I have a problem on iOS safari where it animates in and then disappears, because it doesn't think it's finished with the animation.

@supports (-webkit-overflow-scrolling: touch) {
  mat-sidenav[ng-reflect-opened='true'] {
    transform: translate3d(0px, 0px, 0px);
  }
}

In the meantime I'm adding this fix, which works but obviously removes the animation. If I add a transition here it animates, but looks like it struggles so I'm just leaving it like this.

[ssgriffen]

I might have found something that works for me:

<mat-sidenav-container class="sidenav-container mat-elevation-z4">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="false">
    <mat-toolbar class="side-toolbar toolbar" color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item>
        Home
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="content">
    <mat-toolbar class="content-toolbar toolbar">
        <mat-toolbar-row>
            <button
              id="toggle_button"
              type="button"
              aria-label="Toggle sidenav"
              mat-icon-button
              (click)="drawer.toggle()"
              >
              <mat-icon class="nav-icon" aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <img class="logo" routerLink="home" src="../../assets/img/logo.png">
          </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Notice where I ended up putting the router outlet. Then this css did the trick:

:host >>> .content {
  height: -moz-available;          /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}

Could be a shitty solution idk

[tptshoe]

@jaruesink - where exactly did you put your fix?

[jaruesink]

Just in a global scss file. I have one called _fixes.scss where I put small global tweaks

[tptshoe]

OK, thanks. So, putting it in styles.scss should probably have worked. I am on v5.2.4 right now, so maybe that's the problem. Will see what happens when I upgrade. Maybe this will be solved by then.

[lianesten]

Temporal solution that works for me:

I solved this issue putting the <router-outlet> tag after </mat-toolbar> and before </mat-sidenav-content>

</mat-toolbar>
<div class="content-router">
    <router-outlet></router-outlet>
</div>

doing that, is posible see the menu over the app content.

Aditional issue for me, was that the height of the router-outlet growing up according the app content, and in some cases the app content is minor that the sideNav, so in that case, the sideNav not appear fully. That is the reason for the div tag with the next css class:

.content-router{
min-height: 960px;
}

The height wrap the most of screens. If there is another solution, let me know please.

[rzzo]

I might have found something that works for me:

<mat-sidenav-container class="sidenav-container mat-elevation-z4">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="false">
    <mat-toolbar class="side-toolbar toolbar" color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item>
        Home
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="content">
    <mat-toolbar class="content-toolbar toolbar">
        <mat-toolbar-row>
            <button
              id="toggle_button"
              type="button"
              aria-label="Toggle sidenav"
              mat-icon-button
              (click)="drawer.toggle()"
              >
              <mat-icon class="nav-icon" aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <img class="logo" routerLink="home" src="../../assets/img/logo.png">
          </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Notice where I ended up putting the router outlet. Then this css did the trick:

:host >>> .content {
  height: -moz-available;          /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}

Could be a shitty solution idk

This seemed to work for me... Its working but I agree could be a shitty solution. I have spent many hours on this now and have not gotten anything else to work.

BTW, this seems to be tied to this webkit bug - https://bugs.webkit.org/show_bug.cgi?id=160953

Anyone else figure out anyother solution?

[DeerSteak]

This worked for me, as well. That webkit bug needs fixed. :-/

[Splaktar]

Does anyone have a StackBlitz or GItHub repo where this can be reproduced? Is it reproducible on the docs site?

[Splaktar]

I tested all of the examples in the docs in Safari on iOS 13.5 with Angular Material 9.2.4 and I was not able to reproduce this issue.

[Splaktar]

https://github.com/angular/components/issues/13567 has a reproduction and is related to the same bug, so that may be worth following if this issue is still affecting you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}