【长期】前端常见兼容性问题的解决方案

[zhongxia245]

这里主要记录一些前端常见的兼容性问题，以及解决方案，如果多了后，可以整理一个 npm 包，方便这些兼容性的复用，避免重复浪费时间。

所有解决方案，

1. 提供一个最小可复现的页面
2. 提供一个采用解决方案后解决问题的页面，
3. 指明测试的环境，比如：IOS12.1 ， 微信浏览器下 、 IOS10.1 UIWebview 内核的 APP webview 页面

[zhongxia245]

解决键盘弹出后挡表单的问题

• 待验证是否有效

// 解决键盘弹出后挡表单的问题
window.addEventListener('resize', function () {
if (
  document.activeElement.tagName === 'INPUT' ||
  document.activeElement.tagName === 'TEXTAREA' ||
  document.activeElement.getAttribute('contenteditable') == 'true'
) {
  window.setTimeout(function () {
    if ('scrollIntoView' in document.activeElement) {
      document.activeElement.scrollIntoView();
    } else {
      // @ts-ignore
      document.activeElement.scrollIntoViewIfNeeded();
    }
  }, 0);
}
});

resize 事件在 webview 里面可能只触发一次，这个需要测试下

[zhongxia245]

• 待验证

iOS 下键盘弹起收下

在 iOS 中，输入框弹起键盘前后，页面都可能出现问题，需要监听下键盘弹起收起的状态，然后自己滚动一下。

// 监听键盘收起及弹出状态
document.body.addEventListener('focusout', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})

document.body.addEventListener('focusin', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})

解决方案来自：《本周我们 36 人学了什么》

[zhongxia245]

键盘弹出后页面布局错位

现象

ios 12系统在移动端存在这样的 BUG，复现步骤

1. 点击出现弹框（出现在弹窗上有文本框的情况）
2. 点击输入框唤起键盘
3. 输入完毕后发现弹框上的按钮点击不了了

原因

当然，这个 BUG 只要你轻轻滑动页面就发现问题被轻松解决了。其实解决的原理就是触发页面回流，让被顶起来的页面节点回到原位。

解决方案

click () {
    if (/os 12/ig.test(navigator.userAgent)) {
        window.scrollTo(0, 0)
    }
}

问题和解决方案来自 《我所遇过的移动端兼容性问题》

[zhongxia245]

【微信】点击返回上一页页面不刷新

现象

这也是我在项目中遇到的一个神奇的 BUG，点击「返回」按钮返回到上一页，但是页面却没有刷新。

原因

其实这是 ios 微信的缓存机制造成的，跳转到下一页时仍然会缓存当前页。

解决方案

window.addEventListener('pageshow', function(e) {
    // https://developer.mozilla.org/zh-CN/docs/Web/Events/pageshow
    // 表示网页是否是来自缓存.
    if (e.persisted) {
      location.reload();
    }
});

[zhongxia245]

IOS系统下的 UIWebview 滚动事件延迟触发问题

现象

在 IOS 下的 UIWebview 中，页面的 scroll 事件不会频繁触发，只会在滚动的动效结束后才触发一次。
因此需要使用 滚动置顶 的功能时，交互体验很差。

原因

IOS 的 UIWebview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应。

解决方案

IOS 下采用 position:sticky; ，来实现滚动置顶。 设置了该属性，则不需要再兼容滚动事件来实现滚动置顶了。

但注意，该属性在 IOS 下兼容性不错，但是 android 和 PC下 兼容性堪忧，注意分平台做兼容。

参考文章

1. 移动 web 之滚动篇
2. 杀了个回马枪，还是说说position:sticky吧