5

I'm using Ionic FabButton for a floating button over the content in a fixed position. My code is:-

<ion-fab bottom right class="fab-image" (tap)="nextStep()">
   <button ion-fab style="display: none;"></button>
   <img src="assets/icon/custom/green_arrow.png" alt="">
</ion-fab>

My CSS fir this fab-image is as follows:-

.fab-image{
  position: fixed !important;
  width: 62px;
}

Now it's working on Android just fine:-

Click here to see how it's working on Android

And in iPhone it's working like this:

Click here to see how it working on iPhone

The problem is the glitch on iPhone. The fab button moves as the screen moves. Any ideas how to fix this issue?

Ankur
  • 177
  • 3
  • 15

1 Answers1

4

I had the same problem on IOS, the fab wasn't fixed, here's my code.

<ion-content>
    <!--other code-->

    <ion-fab class="centered-fab" bottom>
         <button  ion-button block round color="primary" (click)="onClick()">
          Click Me
         </button>
    </ion-fab>
</ion-content>

The issue is gone after I move outside of 

<ion-content>
    <!--other code-->
</ion-content>

<ion-fab class="centered-fab" bottom>
     <button  ion-button block round color="primary" (click)="onClick()">
      Click Me
     </button>
</ion-fab>

enter image description here

Haifeng Zhang
  • 30,077
  • 19
  • 81
  • 125
  • 1
    It's totally solved my problem too. Any idea why? Thanks for the reply. I'll mark it as the answer – Ankur Jul 20 '18 at 04:09
  • No, I don't know exactly why... spent a couple of hours searching on Ionic github issues and forum and finally figured it out – Haifeng Zhang Jul 20 '18 at 04:16