From bccb8ad5fb5ec7f98a6cbfa62a403ecaca7fbdb6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 17 Jun 2021 13:36:30 -0400
Subject: [PATCH] fix(modal): border radius is correctly set on card style
 modal (#23461)

---
 core/src/components/modal/modal.ios.scss      |  7 -------
 core/src/components/modal/modal.ios.vars.scss |  2 --
 core/src/css/core.scss                        | 16 ++++++++++------
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 0bdf9db715..85f5a46a41 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -68,10 +68,3 @@
     box-shadow: var(--box-shadow);
   }
 }
-
-:host(.overlay-datetime) {
-  --width: 316px;
-  --height: 296px;
-  --background: transparent;
-  --border-radius: #{$modal-ios-border-radius};
-}
diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss
index 666be8fb9e..d228b75d63 100644
--- a/core/src/components/modal/modal.ios.vars.scss
+++ b/core/src/components/modal/modal.ios.vars.scss
@@ -8,5 +8,3 @@ $modal-ios-background-color:          $background-color !default;
 
 /// @prop - Border radius for the modal
 $modal-ios-border-radius:             10px !default;
-
-$modal-ios-card-border-radius:        10px !default;
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index f6f74def49..7d6b53015e 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -33,7 +33,7 @@ body.backdrop-no-scroll {
 // Modal - Card Style
 // --------------------------------------------------
 /**
- * Card style modal needs additional padding on the 
+ * Card style modal needs additional padding on the
  * top of the header. We accomplish this by targeting
  * the first toolbar in the header.
  * Footer also needs this. We do not adjust the bottom
@@ -45,7 +45,7 @@ html.ios ion-modal ion-footer ion-toolbar:first-of-type {
 }
 
 /**
-* Card style modal needs additional padding on the 
+* Card style modal needs additional padding on the
 * bottom of the header. We accomplish this by targeting
 * the last toolbar in the header.
 */
@@ -63,11 +63,15 @@ html.ios ion-modal ion-toolbar {
   padding-left: calc(var(--ion-safe-area-left) + 8px);
 }
 
-// .ion-page needs to explicitly inherit
-// the border radius in safari otherwise
-// modals will not show border radius properly
+/**
+ * .ion-page needs to explicitly set
+ * the border radius in WebKit otherwise
+ * modals will not show border radius properly.
+ * Do not use inherit as that will not
+ * work with shadow dom in this case.
+ */
 html.ios ion-modal .ion-page {
-  border-radius: inherit;
+  border-radius: 10px 10px 0 0;
 }
 
 /**