Components: bug(sidenav): Scroll locking and jumpy for md-sidenav content on iOS (Safari)

[YeomansIII]

Bug

What is the expected behavior?

Content inside md-sidenav-container should scroll smoothly all the time.

What is the current behavior?

Content inside md-sidenav-container can lock and disallow scrolling. This continues until the page is given time to sit without interaction.

Demonstration

What are the steps to reproduce?

This can be seen happening on the material.angular.io _Components_ page on iOS in Safari.

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

Angular: ^4.0.0
Material: beta.8
iOS 10, Safari

[macjohnny]

@YeomansIII this is a general problem of scrolling an element with overflow: auto on iOS devices.
The problem arises when trying to scroll an element with scrollable content that currently has scrollTop = 0 in the direction that does not reveal further content. In that case, the browser will try to scroll the entire page and will handle this scrolling interaction until no further user input is received.

A way to solve this issue is by listening to the touchmove event and in case the move direction is "wrong", i.e. in the direction with no further content, the event has to be cancelled with Event.preventDefault()

[maciejtreder]

On my end it is working 90% correctly. The only one case, when I run into issue with scrolling side-nav layout in ios, is when using dynamically added content:

<div *ngIf="someConditional">content</img>

[tiancovici]

Seeing same issue on iOS.
On startup, content in sidenav is locked. Navbar isn't.

I can click on the content, but it's not scrollable. Only when I click on the content (and on click) it jumps to their page, it becomes scrollable.

Is there a workaround?

I'll try the touchmove, but was wondering maybe there was a styling approach or an on init force this view so it works approach

[aleixsuau]

Hi, same issue here. Any clue @mmalerba ?
Thanks

[mmalerba]

I'm working on #6712 which will allow the sidenav to be put in fixed position mode, that way you can just let the body scroll naturally and not use overflow:auto and the fixed position sidenav will remain in place

[aleixsuau]

Hi @mmalerba ,
I've found that in my case the cause of the problem was bind to Hammer events:

<md-sidenav-container (swiperight)="openSideBar($event)" (swipeleft)="sidenav.close()">
  <md-sidenav #sidenav mode="over">
    <app-menu (click)="sidenav.close()"></app-menu>
  </md-sidenav>
  <div class="main-container">
    <router-outlet></router-outlet>
    <app-player></app-player>
  </div>
</md-sidenav-container>

If I remove swiperight and swipeleft events, scroll is not blocked anymore.

[mmalerba]

sidenav now supports fixed position mode, documentation was added in #7775

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