fix(modal): swipeable modal now works in firefox (#20714)

fixes #20706
ionic-team · Mar 6, 2020 · 7d260b9 · 7d260b9
1 parent 22d5256
commit 7d260b9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
 }