华为自带浏览器虚拟导航栏导致页面按钮响应错位问题

华为自带浏览器，我遇到的是华为华为 nove 3e，自带浏览器，见图

问题描述： 在vue项目中，进入个人中心页面（如图1），然后进入其他页面-会员开通（如图2），然后上滑该页面，使头部导航栏上缩隐藏，底部虚拟导航栏也隐藏（如图3），然后再返回个人中心，这样就会出现个人中心头部部分区域被隐藏，页面可点击元素的错位（如图4）

图1

图2

图3

图4

 

这应该是浏览器在隐藏上下的虚拟按钮栏之后，对页面没有正确的重排重绘，在手动滑动页面后，错位问题将恢复，那么代码修复呢，想了很多办法，最后决定

fixStyleForHuawei: function() {
    var ua = navigator.userAgent;
    if (!ua.match(/HUAWEI/i) || !ua.match(/MQQBrowser/i)) return;
    // 使页面加长200px
    this.fixStyle = {
       'padding-bottom': '200px'
    }
    this.$nextTick(function() {
        var _this = this;
        setTimeout(function() {
            window.scrollTo(0, 200); // 上滑200px
        }, 200);
        setTimeout(function() {
             window.scrollTo(0, 0); // 下滑到0位置，复原
        }, 500);
        setTimeout(function() {
            _this.fixStyle = null; // 删除页面加长的部分
        }, 1000);
    });
}

既然触摸滑动可以修复问题，那么我们代码来滑动，以此来出发浏览器的重新布局。因为页面不够高，所以加长200px空白区域，然后上滑，再下滑会顶部复原， 然后删除添加的200px空白区域，这样就可以解决了。

这个是华为自带浏览器的虚拟导航栏导致页面错位，其他还有几个浏览器好像也有这种情况，不过我没试这个代码，有机会可以试试。

以上代码只在华为 nove 3e自带浏览器的vue h5项目里测试通过，其他问题可自测，如有不对和疑问，欢迎提出讨论，谢谢。