fix(tab-bar): safe-bottom area is applied correctly (#16179)

* fix(tab-bar): safe-bottom area is applied correctly fixes #16175 * add test
ionic-team · Nov 1, 2018 · 1532bd2 · 1532bd2
1 parent 9c79d98
commit 1532bd2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
@@ -22,7 +22,9 @@
   contain: strict;
   user-select: none;
   z-index: $z-index-toolbar;
-  box-sizing: content-box;
+
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
 }
 
 :host(.ion-color) {

diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
@@ -8,6 +8,12 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../dist/ionic.js"></script>
+
+  <style>
+  :root {
+    --ion-safe-area-bottom: 40px;
+  }
+  </style>
 </head>
 
 <body>