概要

昔からiOSにこいう問題があったらしい。画面上の入力項目をタップすると、バーチャルキーボードが表示されるが、キーボードが入力欄を被ってしまうため、入力できなくて困る。

詳細

最新のiOS16.4のシミュレータで確認したところ、50%くらいの確率で被る問題が発生している。

①キーボードが表示され、ブラウザ画面全体がキーボード領域を除いて縮めされたら、被らない
②キーボードが表示され、ブラウザ画面全体が縮めされなかったら、被る
- ブラウザweb画面がキーボードの後ろにいる
- ここはsafariやiosのバグのでは？

①が本来の正しい動きであるし、そうなる確率も50%近いため、safariやiosのバグのではと思われる。

しかし、それがiOSに対応してくれそうもないので、画面実装に何とかの対策を入れなければならい。

キーボードが表示される時に、画面下部にバーチャルキーボードの高さ分以上のpaddingを入れる。

これでバーチャルキーボード表示動画が終わったら、入力欄が上に自動的にスクロールされる

多分iOSやsafariの実装では①の動きを取ろうとしたが、スクロールできなくて止まってしまったかも。padding-bottomを入れることで、スクロールできるようになった感じ。