概要
昔からiOSにこいう問題があったらしい。画面上の入力項目をタップすると、バーチャルキーボードが表示されるが、キーボードが入力欄を被ってしまうため、入力できなくて困る。
詳細
最新のiOS16.4のシミュレータで確認したところ、50%くらいの確率で被る問題が発生している。
- ①キーボードが表示され、ブラウザ画面全体がキーボード領域を除いて縮めされたら、被らない
- ②キーボードが表示され、ブラウザ画面全体が縮めされなかったら、被る
- ブラウザweb画面がキーボードの後ろにいる
- ここはsafariやiosのバグのでは？
①が本来の正しい動きであるし、そうなる確率も50%近いため、safariやiosのバグのではと思われる。
しかし、それがiOSに対応してくれそうもないので、画面実装に何とかの対策を入れなければならい。
対応策
キーボードが表示される時に、画面下部にバーチャルキーボードの高さ分以上のpaddingを入れる。
- キーボード表示フラグisKeyboardShownを定義
- isKeyboardShownがtrueの場合、画面要素にの
padding-bottom: 240pxスタイルを与える - 入力フィールドのonFocusイベントハンドラーにiOSの場合、isKeyboardShownをtrueに更新する
- 入力フィールドのonBlurイベントハンドラーにiOSの場合、isKeyboardShownをfalseに更新する
これでバーチャルキーボード表示動画が終わったら、入力欄が上に自動的にスクロールされる
纏め
多分iOSやsafariの実装では①の動きを取ろうとしたが、スクロールできなくて止まってしまったかも。padding-bottomを入れることで、スクロールできるようになった感じ。