Ion-fab behind the components during pages transition in iOS

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?

Gabriel Leite.


    <ion-title>My Page</ion-title>
<ion-content padding>

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

        <ion-item>Car 1</ion-item>

        <ion-item-divider color="light">
          <ion-icon name="options" item-left></ion-icon>
              <h2>Option 1</h2>

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

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

  <ion-fab top right edge>
    <button ion-fab mini><ion-icon name="add"></ion-icon></button>
      <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>


try to put fab button in ion-content

put the ion-fab before ion-content

Hi, @hirenkorat3 and @thesourav!

Thanks for the answer!

Ion-fab is already inside the ion-content.

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.