一、iOS12键盘输入后不回弹

问题描述

iOS12系统下，h5或webview页面存在bug，键盘输入完毕收回后，页面不会回弹恢复至之前位置，底下出现空白区域，并导致光标位置错乱，再次点击输入框区域时无法focus或触发其他区域focus，弹框按钮也无法点击。

解决方案

监听input元素blur事件，触发时使body滚动，即手动实现回弹。

handleBlurInOldiOS() {
  const timer = setInterval(() => {
    window.scrollTo(0, 0);
    clearInterval(timer);
  }, 1);
}

二、iOS默认键盘输入中文产生乱码

问题描述

iOS默认键盘在中文联想输入时会直接在input内填入输入的英文，产生乱码。

解决方案

监听input的compositionstart和compositionend事件，当联想输入时延迟文本的填入。

    handleInput(e) {
      if (this.isCompotioning) {
        setTimeout(() => {
          this.handleInputFunction(e);
        }, 100);
      } else {
        this.handleInputFunction(e);
      }
    },
    handleCompositionStart() {
      this.isCompotioning = true;
    },
    handleCompositionEnd() {
      this.isCompotioning = false;
    },

三、低版本iOS使用overflow: scroll后页面滚动卡顿

问题描述

iOS12及以下的页面在使用overflow: scroll后会出现滚动卡顿不连贯的问题

解决方案

在使用overflow: scroll的元素样式中加上-webkit-overflow-scrolling: touch可解决卡顿问题，但引入后页面偶尔会出现卡住或不能滑动的bug，可以在引入-webkit-overflow-scrolling: touch的元素的下一级子元素的height加1%或1px，从而主动触发scrollbar，具体参考。

  &__wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }
  &__content:after {
    min-height: calc(100% + 1px);
  }