Ion-fab button not fixing to bottom right

Unable to get the ion-fab/ion-fab-button to fix to the bottom right of the page.

When I scroll it doesn’t stay fixed to the bottom right slot.

Any help would be greatly appreciated:

    <ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
    <ion-title>Extra Shift</ion-title>
<ion-content class="extraShiftPage" >
    <ion-slides class="slideAsTab" pager="true" centeredSlides="true" *ngIf="extraShiftsByDay && extraShiftsByDay.length > 0">
        <ion-slide *ngFor="let extraShiftByDay of extraShiftsByDay">
          <ion-label class="slideHeader">{{extraShiftByDay.headerDate}}</ion-label>
          <div *ngIf="extraShiftByDay.extraShifts && extraShiftByDay.extraShifts.length > 0">
            <ion-card *ngFor="let extraShift of extraShiftByDay.extraShifts">
                <extra-shift-card [shift]="extraShift" (reload)="getExtraShifts()"></extra-shift-card>
          <div *ngIf="extraShiftByDay && extraShiftByDay.extraShifts.length == 0">
            <label class="noShiftsFound">No Shifts Found</label>
        <ion-fab  vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button (click)="postExtraShift()">
              <ion-icon name="add"></ion-icon>
    <div *ngIf="extraShiftsByDay && extraShiftsByDay.length == 0">
      <label class="noShiftsFound">No Shifts Found</label>

Have you tried placing the ion-fab as a direct child of ion-content?. Say, just before </ion-content>

Yes @josemarsc-dev, when I add it ion-fab right before ion-content, it just disappears.
When I inspect, it shows it as below:

That’s weird. What version of ionic are you using? And can you show your CSS?