Ion-fab behind the components during pages transition in iOS

[gabrielcfcleite]

In iOS, ion-fab stays behind the elements during page transition. In this case, part of the ion-fab is behind the header. But if you place the ion-fab in the center of the screen, it will only appear after some time from the end of the transition animation. The expected behavior is ion-fab appear correctly over the elements.

Has anyone gone through this? Does anyone know how to solve it?

Thanks,
Gabriel Leite.

Code:

<ion-header>
  <ion-navbar>
    <ion-title>My Page</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-card>
    <ion-card-content>

      <ion-item-group>
        <ion-item-divider color="light">
          <ion-icon name="car" item-left></ion-icon>
          Car
        </ion-item-divider>

        <ion-item>Car 1</ion-item>
        <ion-item>US$1000</ion-item>
      </ion-item-group>

      <ion-item-group>
        <ion-item-divider color="light">
          <ion-icon name="options" item-left></ion-icon>
          Options
        </ion-item-divider>
        <ion-item> 
          <ion-label>
              <h2>Option 1</h2>
              <h3>US$100</h3>
          </ion-label>
        </ion-item>
      </ion-item-group>

      <ion-item-divider color="light">
        TOTAL: R$1000
      </ion-item-divider>

    </ion-card-content>
  </ion-card>
  <button ion-button block>Next</button>

  <ion-fab top right edge>
    <button ion-fab mini><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

Screenshots:

• During transition
  

  

• Transition completed
  

  

• During transition
  

  

[hirenkorat3]

try to put fab button in ion-content

[thesourav]

put the ion-fab before ion-content

[gabrielcfcleite]

Hi, @hirenkorat3 and @thesourav!

Thanks for the answer!

@hirenkorat3
Ion-fab is already inside the ion-content.

@thesourav
I followed your suggestion. However, note that during the transition, the ion-fab remains static in its position. At the end of the transition, the button abruptly disappears. The expected behavior would be the fab slide along with the screen during the transition.

Screenshots: