fix(tab-bar): safe area padding now added when slot="top" (#23895)

resolves #23893
ionic-team · Sep 8, 2021 · 4782969 · 4782969
1 parent 8888e2b
commit 4782969
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
@@ -62,6 +62,7 @@
 }
 
 :host([slot="top"]) {
+  padding-top: var(--ion-safe-area-top, 0);
   padding-bottom: 0;
 
   border-top: 0;
@@ -71,4 +72,4 @@
 :host(.tab-bar-hidden) {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
-}
+}
diff --git a/core/src/components/tabs/test/placements/index.html b/core/src/components/tabs/test/placements/index.html
@@ -9,7 +9,14 @@
   <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></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+  <style>
+    :root {
+      --ion-safe-area-top: 20px;
+    }
+  </style>
+</head>
 
 <body>