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

[zurie]

this is because the material sidenav uses 2 divs (one for the sidebar and one for content) and expects the content to scroll (which replaces the scrolling on a body), so when you go up and down you are never actually scrolling the body but instead a fixed div that never tells the browser that it needs to change size or move... the only solution i've ever found was to completely abandon the sidebar / sidenav system in material and just write the page without it (pretend it doesn't exist) and roll out your own solution for a overhanging sidebar from a toolbar menu...

I personally think the sidebar system itself is fine but I don't think its best practice for the way browsers want the body to be the main system that scrolls a page

[Mikastark]

Sadly, the only (ugly) way I found to mitigate this issue is to override sidenav container and content overflow property with "clip" or "unset" value. While functionnal, this may break scrollable container inside.

This is a very frustrating issue.

.example-sidenav-container,
.example-sidenav-content {
  overflow: clip;
}