h5 端问题记录

记录一下 h5 端碰到的问题和解决方法。特别是 iOS。

页面滚动存在元素迟滞/漂移问题（safari）

可以通过 css 属性：will-change: transform 解决。will-change: scroll-position 应该也可以。

需要注意的是，will-change: transform 会造成页面 dom 文字视图不更新/消失（safari 特有 bug——ios13.3）。

iOS 微信浏览器返回页面被强缓存

又是 safari。

/**
 * safari 浏览器会使用 bfcache 缓存页面，导致浏览器后退时，页面不会重新渲染，页面钩子也不会执行。
 * 参考：https://www.jianshu.com/p/b43b89e1e891
 * @param {*} event
 */
window.onpageshow = function(event) {
  // 当页面第一次加载时，persisted 为 false，从缓存加载时，persisted 为 true
  if (event.persisted) {
    window.location.reload()
  }
}

如果是过渡页，不希望后退回到本页面，可以使用 location.replace(xxx) 跳转。