bug: .fab-horizontal-center class is not responsive

[1x2x3x4x]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

If you change the size of ion-fab-button as suggested here by @brandyscarney the ion-fab-button that are centered will not be centered anymore, they'll be shifted to the right a few pixels, enough to notice specially on phones.

Expected behavior:

If you change the height/width it should keep centering properly.

Steps to reproduce:

Just create ion-fab-button centered and change the sizes.

Related code:

Stackblitz
Go to tab 1 and you'll see the bottom, centered fab shifted.

<ion-app>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <ion-content class="ion-padding">
    <ion-fab-button mode="ios">
      <ion-icon name="heart"></ion-icon>
    </ion-fab-button>
  </ion-content>
</ion-app> 

ion-fab-button {
  width: 100px;
  height: 100px;
} 

Other information:

Ionic info:

Ionic CLI                     : 6.11.10
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.803.27
   @angular-devkit/schematics    : 10.1.3
   @angular/cli                  : 8.3.27
   @ionic/angular-toolkit        : 2.3.3

System:
   Android SDK Tools : 26.1.1 
   NodeJS            : v14.15.1 
   npm               : 6.14.8
   OS                : Windows 10

[1x2x3x4x]

Ok, after some digging I found that .fab-horizontal-center is not updating properly. So what I did in my global.scss is give it the half of my width/height of the ion-fab-button, for now.

[liamdebeasi]

Thanks, I can reproduce this behavior. The issue here is that when we set the margin, we use a the value of the $fab-size variable as reference: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/fab/fab.scss#L18. This variable is set to 56px by default: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/fab-button/fab-button.vars.scss#L7.

As a temporary workaround you can do:

ion-fab.fab-horizontal-center {
  margin-inline-start: [negative width of fab button in pixels / 2]
}

So if your fab button width is 100px:

ion-fab.fab-horizontal-center {
  margin-inline-start: -50px;
}

[brandyscarney]

I took a quick look at this - there are a lot of places the $fab-size is used so we will need to investigate the different places that need to be updated.

For the original issue, we could remove the margin in favor of using transform:

:host(.fab-horizontal-center) {
  @include position(null, null, null, 50%);
  transform: translateX(-50%) translateY(-50%);
}

@liamdebeasi Can you think of any issues with this?

[liamdebeasi]

I don't foresee any issues doing transform: translate(-50%, -50%) instead of the margin.

edit: I tried it out in the StackBlitz above, and it worked great.

[Lxstr]

Hi, just wondering if this one is still underway? Am using the workaround for now but noticed this might have been forgotten.

[liamdebeasi]

Hi everyone,

Here is an Ionic 7 dev build with a proposed fix if anyone is interested in testing:

7.4.1-dev.11695395641.14897417

Install Example:

npm install @ionic/angular@7.4.1-dev.11695395641.14897417