diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index f8f73f383a..a475389a49 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -19,7 +19,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ToastPresentOptions)
 
   switch (position) {
     case 'top':
-      wrapperEl.style.top = top;
+      wrapperEl.style.setProperty('transform', `translateY(${top})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
@@ -28,7 +28,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ToastPresentOptions)
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperEl.style.bottom = bottom;
+      wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
   }
diff --git a/core/src/components/toast/animations/utils.ts b/core/src/components/toast/animations/utils.ts
index 47e883d57e..a247a55342 100644
--- a/core/src/components/toast/animations/utils.ts
+++ b/core/src/components/toast/animations/utils.ts
@@ -8,10 +8,12 @@ import type { ToastAnimationPosition, ToastPosition } from '../toast-interface';
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * Note that MD animates bottom-positioned toasts using style.bottom,
- * which calculates from the bottom edge of the screen, while iOS uses
- * translateY, which calculates from the top edge of the screen. This
- * is why the bottom calculates differ slightly between modes.
+ * The default animations for both MD and iOS
+ * use translateY, which calculates from the
+ * top edge of the screen. This behavior impacts
+ * how we compute the offset when a toast has
+ * position='bottom' since we need to calculate from
+ * the bottom edge of the screen instead.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -31,7 +33,7 @@ export function getAnimationPosition(
    */
   let offset: number;
   if (mode === 'md') {
-    offset = 8;
+    offset = position === 'top' ? 8 : -8;
   } else {
     offset = position === 'top' ? 10 : -10;
   }
@@ -54,11 +56,7 @@ export function getAnimationPosition(
        * to the top edge of the anchor. We want to calculate from the
        * bottom edge of the screen instead.
        */
-      if (mode === 'md') {
-        offset += win.innerHeight - box.top;
-      } else {
-        offset -= win.innerHeight - box.top;
-      }
+      offset -= win.innerHeight - box.top;
     }
 
     /**
@@ -72,10 +70,7 @@ export function getAnimationPosition(
   } else {
     return {
       top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom:
-        mode === 'md'
-          ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
-          : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
     };
   }
 }
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png
index 26cdc190d3..70d91d97dc 100644
Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png
index 3c3c9e9778..aecf4c89f6 100644
Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png
index afaa73521d..5ed7e688fa 100644
Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png
index ba629c93ff..f9627a2145 100644
Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss
index 4f20901476..2c56f21811 100644
--- a/core/src/components/toast/toast.ios.scss
+++ b/core/src/components/toast/toast.ios.scss
@@ -37,22 +37,10 @@
   }
 }
 
-.toast-wrapper.toast-top {
-  @include transform(translate3d(0, -100%, 0));
-
-  top: 0;
-}
-
 .toast-wrapper.toast-middle {
   opacity: .01;
 }
 
-.toast-wrapper.toast-bottom {
-  @include transform(translate3d(0, 100%, 0));
-
-  bottom: 0;
-}
-
 .toast-content {
   @include padding($toast-ios-content-padding-top, $toast-ios-content-padding-end, $toast-ios-content-padding-bottom, $toast-ios-content-padding-start);
 }
@@ -96,4 +84,4 @@
   .toast-button:hover {
     opacity: .6;
   }
-}
\ No newline at end of file
+}
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 6e5a85b892..2b94cf94d9 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -99,6 +99,18 @@
   box-shadow: var(--box-shadow);
 }
 
+.toast-wrapper.toast-top {
+  @include transform(translate3d(0, -100%, 0));
+
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  @include transform(translate3d(0, 100%, 0));
+
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;