CODEWITHSUNDEEP
ionic-frameworkionic-nativefloating-action-button
Ankur
Ankur

Reputation: 181

Ionic FabButton not properly working on iPhone

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?

Upvotes: 5

Views: 1135

Answers (1)

Haifeng Zhang
Haifeng Zhang

Reputation: 31903

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

Upvotes: 4

Related Questions