IOS微信下问题1 底部导航栏导致标签位置偏移

何时出现：

在IOS微信浏览器下，当浏览器内出现跳转产生url历史记录的时候，此栏就会出现

导致的问题：

        导航栏影响高度计算，此问题很少出现。模拟问题，用户打开一个页面，此时没有历史记录导航栏不存在。用户进行跳转有历史记录导航栏出现，在此页面正好存在非正常布局流元素（例position:”fixed”）针对底部定位，那ok完蛋，你在IOS偶尔就会看到元素会偏下 一个导航栏的高度。

                                      

 

图中我们写的导航栏使用position: “absolute”;bottom: 0定位，1图由于此问题我们的导航栏直接被覆盖。2图为正常状态

解决方式：

1、不产生历史记录让此栏不出现，由于未授权代码无法清除会话历史（session History），也不能禁用回退/前进功能。最快捷的可用方式是使location.replace()方法，提供指定的URL来替换当前的会话历史（session history）。几种常用UI框架的路由库也都有replace的替代方法。（如果不好实现可以在第一个页面产生历史记录也可以避免此问题） 解释两点，1用replace替代push指第一个页面到第二个页面push->replace,其他页面不变 2 如何在第一个界面产生历史记录:可以在跳转到第一个页面前再加一个页面，此页面不需要内容直接跳转即可。

2、在高度改变后重新定位。在底部导航栏页面高度会改变，由此可以利用onresize监听页面大小变化，在高度改变后重新设置非正常布局流元素即可解决。

function resizeHeight(e){
    let resizeTimeout;
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            let navBar = document.getElementsByClassName("component-tab-bar-box")[0]; //此类即为非正常布局流元素  请使用你出现问题的元素
            navBar.style.position = "fixed"; //可不加
            let bottom = navBar.style.bottom;
            navBar.style.bottom = parseInt(bottom) ? 0 : 1 + 'px';
        }, 200);  //此处200ms只做参考，如还出现问题可增加时间延迟
    }
}
window.onresize = resizeHeight;