[TabBar 标签栏] safeAreaInsetBottom属性好像没效果问题

[xiguiliu]

tdesign-mobile-vue 版本

1.6.0

重现链接

No response

重现步骤

使用TabBar 标签栏组件，在iphone机型上会被下面横线挡住部分的tabBar，使用padding-bottom: 10px;设置后能避免遮挡，可是其他安卓机型由于设置了padding-bottom: 10px;会显示tabbar高度较高，不美观。设置safeAreaInsetBottom属性好像没有效果。safeAreaInsetBottom=“true”和safeAreaInsetBottom=“false”看不出区别在哪。

期望结果

iphone机型TbaBar不被横线遮挡，寻找更佳解决办法

实际结果

No response

框架版本

3.5.12

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @xiguiliu，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[uax]

这个问题好像确实存在，true/false 在模拟器中看不出区别。
css 倒是加上了：t-tab-bar--safe:{
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}

[uax]

无论 true/false，iOS 模拟器/真机中都会底部加 bottom，颜色和 tabbar 背景色一致，但是也会出现这个问题：shape="round"的话如图所示，是不是这里 shape=round 的话，底部 bottom 的背景色应该透明。

<t-tab-bar
v-model="name"
shape="round"
theme="tag"
:fixed="true"
:safeAreaInsetBottom="false"
@change="change"

[anlyyao]

@uax @xiguiliu viewport 有加上 viewport-fit=cover 吗？

[uax]

@anlyyao 没有加viewport-fit=cover；我试着添加了viewport-fit=cover，反而底部撑的更多了。截图如下：
这是没加cover 的截图：

这是添加viewport-fit=cover后的截图：

[uax]

看下这个，加了 cover 后，tabbar 用了shape="round"：

[anlyyao]

@uax 有仓库吗？我拉你源码看看

我这边测试下来，如下图：