bug(mat-sidenav): Navigation Schematic - does not allow full screen scrolling on iOS devices

[Marcusg62]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
https://stackblitz.com/github/Marcusg62/angular-material-bug-
Steps to reproduce:

1. ng new testapp
2. ng generate @angular/material:navigation shell
3. add <app-shell></app-shell> to app.component.html
4. Add some lorem placeholder text to main area to force overflow and scroll.
5. Run on an iOS device/simulator

Expected Behavior

When you scroll on the device, the button bar and address bar should hide and the mat-toolbar should stay fixed at the top. However it seems you cannot get the best of both worlds.
You can change the css so that you get the scrolling with hidden bars, but not the toolbar to be stikcy.

Actual Behavior

What behavior did you actually see?
There is a css property
.sidenav-container { height: 100%; }
Which doesn't allow this feature to happen.

If you comment out this height: 100%; , the feature takes affect but the toolbar is no longer sticky. So the key is to get a sticky/fixed mat-toolbar without side effects. I've tried doing things like position: fixed but that has a lot of bad side effects on positioning items inside the toolbar.

Environment

• Angular: 9.1.9
• CDK/Material: 8.2.4
• Browser(s): Mobile Safari 13.1
• Operating System iOS 13.4.1