diff --git a/examples/mini-program-example/src/index.html b/examples/mini-program-example/src/index.html
index f25a190fde31..b047d70e2040 100644
--- a/examples/mini-program-example/src/index.html
+++ b/examples/mini-program-example/src/index.html
@@ -2,7 +2,7 @@
-
+
diff --git a/packages/taro-cli/templates/default/src/index.html b/packages/taro-cli/templates/default/src/index.html
index de390d4de4dc..092c5177d535 100644
--- a/packages/taro-cli/templates/default/src/index.html
+++ b/packages/taro-cli/templates/default/src/index.html
@@ -2,7 +2,7 @@
-
+
diff --git a/packages/taro-components/src/components/tabbar/style/index.scss b/packages/taro-components/src/components/tabbar/style/index.scss
index 99a535c965d9..ba20fb72fc38 100644
--- a/packages/taro-components/src/components/tabbar/style/index.scss
+++ b/packages/taro-components/src/components/tabbar/style/index.scss
@@ -41,7 +41,8 @@ body {
&__tabbar {
position: relative;
width: 100%;
- height: var(--taro-tabbar-height);
+ height: calc(var(--taro-tabbar-height) + constant(safe-area-inset-bottom));
+ height: calc(var(--taro-tabbar-height) + env(safe-area-inset-bottom));
transition: bottom 0.2s, top 0.2s;
&-top {
@@ -50,8 +51,7 @@ body {
&-bottom {
bottom: 0;
- margin-bottom: constant(safe-area-inset-bottom);
- margin-bottom: env(safe-area-inset-bottom);
+ margin-bottom: 0;
}
&-hide {