久しぶりな気がする Cordova のプラグインについて。
今回は、以前も紹介した「cordova-plugin-keyboard」の不具合についてです。
個人的にはバグ・不具合というよりも、特定の設定との相性が悪いと言った方が正しいと思っています。
さて、遭遇した現象ですが、iOS で「cordova-plugin-keyboard」プラグインを導入したところ、<input> 要素や <textarea> 要素をタップしてフォーカスが当たり、ソフトウェアキーボードが表示された際に、謎の黒いエリアが現れるようになってしまいました。
こちらのプラグインは、画面下部に配置した <textarea> 要素に入力しようとした時、キーボードの後ろに隠れてしまうため、その対処として導入したのですが…一難去ってまた一難とはこのことなのでしょうか…。
検証ツールで見てみても、そもそも <body> 要素が上にずれてて、何をどうして直せばいいのかわからない…。
今回参考にさせていただいた投稿はこちらから。
app moves on input focus ios 12 and above · Issue #83 · cjpearson/cordova-plugin-keyboard · GitHub
https://github.com/cjpearson/cordova-plugin-keyboard/issues/83
cordova-plugin-keyboard の Issues に解決方法についての投稿がありました！
なお、先ほどから言っている「謎の黒いエリア」のスクリーンショットも載っているので、イメージが付きやすいと思います。
で、こちらによると、<meta name="viewport" /> 要素内で指定している "viewport-fit=cover" を削除するといいとのことでした。
実際に試したところ…確かに黒いエリアが消えました！
検証ツールで確認しても <body> 要素が変なことにもなっていないし、無事解決です！
…と思っていたのですが、こちらを iPhoneX など、ノッチのある端末で確認したところ、画面下部のセーフエリアまでコンテンツが表示されないという状態に…。
"viewport-fit=cover" を削除したので当然ではあるのですが、これどちらを優先させようか…。
とりあえず、両立する方法はないか調査したいと思います！
以上、「cordova-plugin-keyboard」プラグインを導入した際、入力欄がフォーカスされた時に黒いエリアが現れる時の対処法でした。
ご参考になれば幸いです。
