iOS H5 history.back() 返回上一路由 页面白屏

问题描述

最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。

解决方案

1、使用绝对定位

这个也是参考了网上的写法，把列表页高度设为100%，绝对定位

 .container {
        position: absolute;
        height: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

绝对定位之后，没有再出现白屏现象。但是，这种写法体验非常差，在iOS上滚动很生硬，还会有回弹的现象，而且也不利于容器内部一些样式的拓展，例如背景图片等等。

2、改变history.scrollRestoration （推荐）

使用history.back返回上一页的时候，浏览器会记录页面的滚动位置，而在iOS上面，滚动后返回的时候页面渲染会出现问题，导致白屏。可以利用scrollRestoration属性，它默认是auto，也就是会记录滚动位置（这是H5新增的属性，所以需要判断浏览器是否支持，我实践的是可以兼容大部分移动端机型）

 if ('scrollRestoration' in history) {
            history.scrollRestoration = 'manual'; //改为manual之后，就不会记录滚动位置
        }

在列表页渲染完成的生命周期函数里添加以上代码，可以解决白屏问题

参考文章：

• https://stackoverflow.com/questions/10742422/prevent-browser-scroll-on-html5-history-popstate
• https://blog.csdn.net/m0_38069630/article/details/80573283