Side menu with header: scroll container extends below viewport

[Manduro]

Short description of the problem:

When using a side menu with a header, the scroll container is extending below the viewport by the height of the header. This makes the bottom content inaccessible.

For example, when the viewport height is 568px and the header height is 44px: the content starts below the header but is also 568px in height, while it should be 524px.
Or, to make it behave the same as in a normal page: the content should start behind the header and be 568px in height, but the <div class="scroll-content"> should get a margin-top: 44px. (What happens here.)

This happens only in Safari, both desktop and mobile, both in ios and md mode. Chrome seems to prevent this by keeping the scrolling part inside the viewport automatically.

Steps to reproduce:

1. Use a side menu
2. Add a header and a long scrolling list
3. Scroll down and notice the last few items aren't visible. You can also see the scrollbar going out of the viewport.

<ion-menu [content]="menuContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
      <ion-buttons end>
        <button ion-button icon-only menuClose>
          <ion-icon name="close"></ion-icon>
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content>

    <ion-list>
      <ion-item *ngFor="let item of veryLongArray">
        Last few items in this list are not visible when scrolling down.
      </ion-item>
    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav #menuContent></ion-nav>

Workaround
Adding the following styles fixes this for me, but the margin-top should probably be set dynamically depending on the number of toolbars, tabs, etc, just as is done on a normal page.

.platform-ios .menu-inner {
  > ion-header {
    position: absolute;
  }

  > .header-md + .content-md > .scroll-content {
    margin-top: $toolbar-md-height;
  }

  > .header-ios + .content-ios > .scroll-content {
    margin-top: $toolbar-ios-height;
  }
}

Which Ionic Version?
2.0.0-rc.0

Plunker that shows an example of your issue

Haven't seen a Plunker for RC.0 yet.

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a 

[cekrem]

+1

[manucorporat]

@Manduro sometimes an image (or gif) worth a thousand words ;) can you provide a screenshot? It will help me understand better what I have to find. Thanks!

[Manduro]

Here you go!

[manucorporat]

Thanks @Manduro. I was able to reproduce, issue accepted. Working in a fix

[Manduro]

@manucorporat Cool, thanks! Is a Plunker that works for RC0 on the roadmap? That would make it a lot easier to report bugs.

[manucorporat]

@Manduro WIP fix! #8514

[Manduro]

@manucorporat Looks great!