FAB '×' icon behaving strangely when I open a list

Ionic Framework ionic-v3
1

I have a FAB that, when clicked, gives a couple of options to click on. However, when you click the ‘+’ icon on the button, and it switches to the ‘×’ symbol to close the list of options, the second ‘×’ icon drops down by a few pixels so it isn’t placed centrally within the circular button any more. I’m not sure if this is a bug or something within my scss, but I can’t seem to get rid of it by deleting bits of the css.

It looks like this.

For reference, here is my HTML:

<ion-fab right bottom #fab>
    <button ion-fab>
     <ion-icon name="add"></ion-icon>
   </button>
    <ion-fab-list side="top" #fabList>
      <div *ngIf="fabList.classList.contains('fab-list-active')" class="backdrop" (click)="fab.close();"></div>
      <button ion-fab (click)="goToAddChallenge()"><ion-icon color="danger" name="flag"></ion-icon><ion-label tappable (click)="goToAddChallenge()">New challenge</ion-label></button>
      <button ion-fab (click)="goToAddExercise()"><ion-icon color="danger" name="pie"></ion-icon><ion-label tappable (click)="goToAddExercise()">New exercise</ion-label></button>
    </ion-fab-list>
  </ion-fab>

and here are the styles:

button[ion-fab] {
    overflow: visible;
    position: relative;

    ion-label {
      position: absolute;
      top: -8px;
      right: 40px;
      color: white;
      background-color: #002C31;
      box-shadow: 0 3px 4px #6b6b6b;
      line-height: 24px;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }

  .fab {
    contain: layout;
  }

  .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
  }

  button.fab.fab-close-active {
    z-index: 1;
  }

Edit: I don’t get this issue at all when I use ionic serve, only when I emulate it on my Android device.