FAB scrolls when used in segment

[ghost]

Ionic version: (check one with "x") [x ] 2.x

I'm submitting a ... (check one with "x") [x] bug report

Current behavior: ion-fab right bottom scrolls when used in segment.

Expected behavior: ion-fab right bottom should not scroll.

Steps to reproduce:

ionic start fab-scroll-issue --v2

replace home.html with the code below

Related code:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment">
      <ion-segment-button value="AAA">
        AAA
      </ion-segment-button>
      <ion-segment-button value="BBB">
        BBB
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'AAA'">
      <ion-list>
        <ion-item>Pokémon Yellow</ion-item>
        <ion-item>Super Metroid</ion-item>
        <ion-item>Mega Man X</ion-item>
        <ion-item>The Legend of Zelda</ion-item>
        <ion-item>Pac-Man</ion-item>
        <ion-item>Super Mario World</ion-item>
        <ion-item>Street Fighter II</ion-item>
        <ion-item>Half Life</ion-item>
        <ion-item>Final Fantasy VII</ion-item>
        <ion-item>Star Fox</ion-item>
        <ion-item>Tetris</ion-item>
        <ion-item>Donkey Kong III</ion-item>
        <ion-item>GoldenEye 007</ion-item>
        <ion-item>Doom</ion-item>
        <ion-item>Fallout</ion-item>
        <ion-item>GTA</ion-item>
        <ion-item>Halo</ion-item>
      </ion-list>
      <!-- Real floating action button, fixed. It will not scroll with the content -->
      <ion-fab right bottom>
        <button ion-fab>Button</button>
      </ion-fab>
    </ion-list>
    <ion-list *ngSwitchCase="'BBB'">
      <ion-item>
        <h2>segment without FAB</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

Other information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

[mburger81]

Are there any plans to close it in the near future, for example on RC.4 or RC.5?

[manucorporat]

This is a problem with content projection in angular 2, this can't be fixed in ionic.

Instead you should place the fab button in ion-content directly and use *ngIf or [hidden]

[mburger81]

@manucorporat Do you happen to know if this problem with projection in angular2 is resolved in feature for example in angular4, or is this problem a design problem?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.