一、iOS12鍵盤輸入后不回彈

問題描述

iOS12系統(tǒng)下，h5或webview頁面存在bug，鍵盤輸入完畢收回后，頁面不會回彈恢復至之前位置，底下出現空白區(qū)域，并導致光標位置錯亂，再次點擊輸入框區(qū)域時無法focus或觸發(fā)其他區(qū)域focus，彈框按鈕也無法點擊。

解決方案

監(jiān)聽input元素blur事件，觸發(fā)時使body滾動，即手動實現回彈。

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

二、iOS默認鍵盤輸入中文產生亂碼

問題描述

iOS默認鍵盤在中文聯想輸入時會直接在input內填入輸入的英文，產生亂碼。

解決方案

監(jiān)聽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，從而主動觸發(fā)scrollbar，具體參考。

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