From cf287fda7f67735657f63bb1f4cf79dd4e656886 Mon Sep 17 00:00:00 2001
From: Mike Hartington <mhartington@users.noreply.github.com>
Date: Thu, 9 Jan 2020 10:57:45 -0500
Subject: [PATCH] fix(modal): card-style modal offset now matches the iOS spec
 (#20166)

* chore(core): better animations
Updates animations to be closer to native

* Add css alternative

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 core/src/components/modal/animations/ios.enter.ts | 2 +-
 core/src/components/modal/animations/ios.leave.ts | 4 ++--
 core/src/components/modal/modal.ios.scss          | 2 +-
 core/src/components/modal/test/spec/index.html    | 7 +------
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index 3c354938fc..388c704e0e 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -27,7 +27,7 @@ export const iosEnterAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'calc(var(--ion-safe-area-top) + 10px)';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
     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 0daeb62a91..4cbf32ddd4 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -9,7 +9,7 @@ export const iosLeaveAnimation = (
   baseEl: HTMLElement,
   presentingEl?: HTMLElement,
   duration = 500
-  ): Animation => {
+): Animation => {
 
   const backdropAnimation = createAnimation()
     .addElement(baseEl.querySelector('ion-backdrop')!)
@@ -27,7 +27,7 @@ export const iosLeaveAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'calc(var(--ion-safe-area-top) + 10px)';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
     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 fa4347bdca..590892088d 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -27,5 +27,5 @@
 
 :host(.modal-card) .modal-wrapper {
   @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
-  height: calc(100% - var(--ion-safe-area-top) - 20px);
+  height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
 }
\ No newline at end of file
diff --git a/core/src/components/modal/test/spec/index.html b/core/src/components/modal/test/spec/index.html
index 8514c1d261..55d838cc26 100644
--- a/core/src/components/modal/test/spec/index.html
+++ b/core/src/components/modal/test/spec/index.html
@@ -6,18 +6,13 @@
   <title>Modal - Spec</title>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   <style>
-  :root {
-    --ion-safe-area-top: 20px;
-    --ion-safe-area-bottom: 20px;
-  }
-
   #modal-header {
     padding-top: 5px !important;
     height: 55px;