diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index 608fb04b31..b21f237cf0 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -31,7 +31,13 @@ export const iosEnterAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
+    /**
+     * Fallback for browsers that does not support `max()` (ex: Firefox)
+     * No need to wrry about statusbar padding since engines like Gecko
+     * are not used as the engine for standlone Cordova/Capacitor apps
+     */
+    const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
     const bodyEl = document.body;
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index dc220e8165..1500f224bf 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -27,7 +27,8 @@ export const iosLeaveAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
+    const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
     const bodyEl = document.body;
     const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const presentingAnimation = createAnimation()
diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index a92867c32b..98f714a459 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -28,5 +28,11 @@
 
 :host(.modal-card) .modal-wrapper {
   @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
-  height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
+  height: calc(100% - 40px);
+}
+
+@supports (width: max(0px, 1px)) {
+  :host(.modal-card) .modal-wrapper {
+    height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
+  }
 }
\ No newline at end of file