fullscreen prevents address bar from collapsing in ios safari

[mollywoodnini]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The address bar in the mobile safari browser should collapse while scrolling down. Tapping at the top of the address bar should browse to the top.

What is the current behavior?

Using fullscreen in md-sidenav-layout prevents the address bar from collapsing while scrolling. Tapping at the top of the address bar has no effects.

What are the steps to reproduce?

Scrolling the site down. Tapping at the address bar.

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

The motivation is to not corrupt the native experience of iOS.

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

Angular2 RC4 Angular2 Material alpha 6 iOS 9.3 Mobile safari

Thanks.

[pascalwhoop]

I created a screen recording to show what is described. I hope that helps

https://media.giphy.com/media/3ohzdCMs2cudR4hHVK/giphy.gif

Generally, having an absolute positioned element being the scrolling container causes these problems. The body needs to be part of the scrolling flow, for iOS to 'get it'

[jelbourn]

Believe this is obsolete as we've eliminated this API.

[simerlec]

I'm not sure if I should open a new issue for this because this is exactly the behaviour I am experiencing as well. Following the Material Guide here I created my sidenav as described, only with a router outlet in the main content div, but this should not matter

<app>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>
</app>

html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

The issue I'm having is that this fix for a fullscreen sidenav (since we should not use the fullscreen attribute! https://github.com/angular/material2/issues/759) is indeed working but on mobile browsers the css prevents the address bar from shrinking - as shown in the .gif.

Can you provide a solution for this problem?

Thanks

[mmalerba]

@simerlec Yeah this is still an issue with the recommended approach. It's high on my list of things to work on.

[kiwikern]

angular.io uses the sidenav component, but still hides the address bar. Scrolling is not done within the sidenav-content-div but with the whole document. It is probably related to setting height: auto !important;, but I wasn't able to fully reproduce it. https://github.com/angular/angular/blob/7caa0a8aa46aae05102e82ba68b268c2c392f856/aio/src/app/app.component.html

[mackelito]

Is there any updates on this issue?

[zweinz]

I think this likely has something to do with .mat-drawer-content having overflow:auto, so the scrolling is happening within the div instead of the page as a whole. This also leads to some awkward scrolling behavior when we try to add a scrollable div within the drawer-content.

[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.}