uni-app ios深色主题中使用page.json内的原生tab，页面高度设置为100%后tab上有一条白线

操作步骤：

下载附件test-app压缩包后通过HBuilder X真机运行到iPhone 12 Pro Max上

预期结果：

使用原生page.json中的tab在不会在tab头部显示窗口背景色(这里如果窗口背景色设置为透明会截取上一个页面在此处的内容)

实际结果：

使用原生page.json的tab会咋tab头部1px左右高度显示窗口背景色,App做主题切换无法动态修改窗体背景色,窗体背景色修改为透明会截取显示上一个页面在此处(白线区域)的内容

bug描述：

ios深色主题中使用page.json内的原生tab,在页面高度设置为100%(超过100%能滚动条后会消失)后tab上有一条白线(线条的颜色是窗体背景色)单一主题模式下可以通过设置窗体颜色背景色,但是要做主题切换的的话这样就是实现不了了,因为官方提供的动态修改背景色的api(uni.setBackgroundColor)还没有支到持APP.但是现在还有这个问题,所以再提一下,希望能得到解决,代码附件

附件

test-app.rar

截图

更多关于uni-app ios深色主题中使用page.json内的原生tab，页面高度设置为100%后tab上有一条白线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

我们排查一下

更多关于uni-app ios深色主题中使用page.json内的原生tab，页面高度设置为100%后tab上有一条白线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼

好的,谢谢,我的qq是1807188131,可随时联系

gougou168 3楼

我也是这个问题，请问有结果了么

yibo5220 4楼

这是一个iOS深色模式下原生tabBar与页面布局的兼容性问题。白线实际上是窗口背景色在tabBar顶部的显示。

问题原因： 在iOS深色主题下，当页面高度设置为100%时，原生tabBar与页面内容区域之间存在1px左右的间隙，这个间隙会显示窗口背景色（默认白色），在深色主题下形成明显的白线。

解决方案：

页面高度调整为calc(100vh - 1px)：在App.vue或对应页面的样式中，将页面高度设置为：
```
page {
  height: calc(100vh - 1px);
}
```
这样可以消除tabBar顶部的间隙。

使用CSS变量适配主题：如果需要进行主题切换，可以在App.vue中通过CSS变量控制：

:root {
  --window-bg: #ffffff;
}

[@media](/user/media) (prefers-color-scheme: dark) {
  :root {
    --window-bg: #000000;
  }
}

page {
  background-color: var(--window-bg);
}

页面背景色覆盖：确保每个页面的背景色与tabBar背景色一致，避免颜色差异：
```
.page-container {
  background-color: #你的主题色;
  min-height: 100vh;
}
```