ios 12で遭遇したINput弾戸付き転位問題の解決方法


問題の説明:
fixedを使って位置を決める弾戸は、ios 12のシステムではソフトキーボードが調整された後、ページ全体が上に移動します。ソフトキーボードが消えた時、視覚上のページは元の位置に戻りましたが、実際には弾戸の焦点位置はソフトキーボードで調整された時の位置にあります。
解決策:
これもある大男の解決方法を参考にしたものです。

document.body.addEventListener('focusin', () => {
  //           
  this.isReset = false
})
document.body.addEventListener('focusout', () => {
  //           
  this.isReset = true
  setTimeout(() => {
    //                     
    if (this.isReset) {
     window.scroll(0, 0) //           
    }
  }, 300)
})
解決を試みる他の方法
fixポジショニングを使わずに選択したabsoluteを試してみて、inputが焦げていると判断した場合は、window.scrollを使いますが、解決すべき問題が多いです。
  • 異なる携帯電話のinput枠は、ソフトキーボードが閉じられた時とは状況が違っています。アップルのソフトキーボードを閉じると、inputのフレームは焦げてしまいますが、ミニメートルの携帯電話のキーボードが閉まると、inputのフレームは焦げにくくなります。
  • absoluteを使用して位置を特定したら、ソフトキーボードはページが上に移動します。ソフトキーボードが消えると、ページは元の位置に戻りません。
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。