Angular Material Sidenav issue for ios

Question

I am using angular version 6 with material design. I have created one page which uses sidenav component on material design and its stackblitz link is https://angular-pxw1qr.stackblitz.io/sidenav. When i open sidenav page in any Iphone and pull down or pull up the screen sidenav content goes behind the page content and white background is coming at top or bottom of the page.

What i can do to remove this behavior ?

Answer 1

You're missing the fullscreen attribute on your sidenav container:

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav>
    <!-- ... -->
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- ... -->
  </mat-sidenav-content>
</mat-sidenav-container>

Note that this is just used for styling and does not serve any other purpose.

---

See the sidenav's stylesheet, as well as the mat-fill mixin for more info.