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) 跳转。