Ion-toast custom position exit animation over ion-tab

[DuncanTLaw]

When I have a toast:

async presentSetsToast() {
    const toast = await this.toastController.create({
      message: `All sets completed.`,
      cssClass: 'toast-class',
      duration: 3000,
      color: 'dark'
    });
    await toast.present();
  }

with the cssClass:

.toast-class {
  font-size: large;
  transform: translateY(-50px);
  text-align: center;
}

where the translateY moves the toast above the ion-tab bar as seen in the video, the animation is as expected when I do ionic serve on localhost - the tab bar appears and disappears beneath the tab bar. However when I deploy it and open it on my iPhone’s safari/serve it on my iPhone using Capacitor, the toast goes over the tab bar and the exit animation is buggy.