search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.36k stars 6.74k forks source link

Header is scrolled when sidenav is opened in "over" mode on iOS devices #15315

Open mihalcan opened 5 years ago

mihalcan commented 5 years ago

What is the expected behavior?

Window should not be scrolled and header should remain visible when sidenav is opened on iOS devices

What is the current behavior?

When mat-sidenav is opened in "over" mode and mat-sidenav-content takes the full height of the screen, page is scrolled after a delay and header is scrolled out of the view so it becomes not visible.

What are the steps to reproduce?

Stackblitz: https://stackblitz.com/edit/angular-material2-issue-wdzkw1?file=app%2Fapp.component.html

GIF shows the issue - initially header is visible, when toggle button is clicked, sidenav opens and then after a small delay header is scrolled out of the view sidenav issue on ios

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

Stackblitz is using Angular 7.0.1, Material 7.0.2 (the same happens with version 7.2.1) Issues affects Safari, Chrome and FF on iOS (checked on iPhone7, X and iPad Pro 11 2018)

Is there anything else we should know?

No

heorhii-zolotariuk commented 3 years ago

@mihalcan Hello, did you find a solution or a workaround ?