【报Bug】uniapp 生成H5 用iOS的wkwebview 加载tabbar布局的页面 tabbar位置不靠近底部

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 13.2.1 (22D68)

HBuilderX类型：正式

HBuilderX版本号： 3.7.11

浏览器平台： Safari

浏览器版本： iOS的webview控件加载

项目创建方式： HBuilderX

示例代码：

pages.json 里面配置的tabbar

"tabBar": {  
            "color": "#ccc",  
            "selectedColor": "#8b8b8b",  
            "borderStyle": "black",  
            "backgroundColor": "#ffffff",  
            "height": "50px",  
            "fontSize": "10px",  
            "iconWidth": "24px",  
            "spacing": "3px",  
            "list": [{  
                "pagePath": "pages/index/index",  
                "iconPath": "static/icons/home.png",  
                "selectedIconPath": "static/icons/homeActive.png",  
                "text": "首页"  
            }, {  
                "pagePath": "pages/index/community",  
                "iconPath": "static/icons/zx.png",  
                "selectedIconPath": "static/icons/zxactive.png",  
                "text": "动态"  
            },

index.html  

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title></title>  
    <!--preload-links-->  
    <!--app-context-->  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  
    <script type="module" src="/main.js"></script>  
  </body>  
</html>  

app.vue   

<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    page {  
      background-color: #efeff4;  
      height: 100%;  
      font-size: 28rpx;  
     }  

</style>

操作步骤：

默认创建tabbar 生成h5 用iOS wkwebview 加载 tabbar几个首页的高度但凡不是足够比屏幕高，tabbar一点是偏移在上面的

预期结果：

默认创建tabbar 生成h5 用iOS wkwebview 加载 tabbar稳定在底部，而且点击不出现闪烁

实际结果：

tabbar一点是偏移在上面的，然后点击闪烁或者页面出现数据变动时 tabbar开始偏移到底部

bug描述：

创建工程只配置好tabbar 然后打包h5 用ios的wkwebview加载

tabbar的Y坐标位置偏移不再是一直贴着底部，如果 "pages/index/index" 这个高度如果容器足够高，也能把tabbar撑到最底部，但是会有闪烁偏移的过程，肉眼看得到的闪烁。

基本就是默认的tabbar 创建方法，生成h5 加载基本必现这个问题，我找了很多demo 项目全是这样tabbar偏移的

但是找到一个特别的 就是官方demo 的tabbar 位置正常点击也不闪烁 但是没找到区别，遇到这个问题或者知道原理的回答下

据说这个bug是 安全区的高度识别 好像是减了2次安全区了

解决方法1:
按照官方demo的思路在app.vue
加上如下

<style>  
    /*每个页面公共css */  
    page {  
      background-color: #efeff4;  
      height: 100%;  
      font-size: 28rpx;  
     }  

     .uni-app--showtabbar  
        uni-page-head[uni-page-head-type='default']  
        ~ uni-page-wrapper {  
        height: calc(100% - 44px - var(--tab-bar-height));  
      }  
</style>

这样是靠着底部，但是第一次点击tabbar其他页面的时候，会出现tabbar从偏移位置到底部的闪烁，终究是不太友好啊。

完美方法没找到！