diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index c917100070d..34628ba42cb 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -140,5 +140,5 @@
  * completely cover the content.
  */
 :host(.modal-sheet) {
-  --height: calc(100% - 10px);
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
 }
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index 5b4dee2ad60..bb13a7a4168 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -4,18 +4,17 @@
 <head>
   <meta charset="UTF-8">
   <title>Modal - Sheet</title>
-  <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;
-  }
 
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-title" content="Ionic App" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <style>
   .custom-height {
     --height: 50%;
   }
