iOS 13未満のVisualviewport API

こんにちは、

Discourse が iOS で仮想キーボードの最上部をどのように計算しているか確認しました。これは、今私が入力しているこの入力フィールドのように、仮想キーボードの直上に何かを配置したい場合に重要です。

Android のブラウザ端末では、固定位置(position: fixed)の要素が自動的に表示される際、視覚キーボードの直上に押し上げられるため、この問題は発生しません。

iOS での回避策は、Visual Viewport API https://developer.mozilla.org/ja/docs/Web/API/Visual_Viewport_API を使用することです。ただし、唯一の問題は、iOS 13 以前のデバイスではサポートされていないことです。

iOS 12.1 の端末で同じ入力フィールドをテストしたところ、Discourse はサポートされていない iOS Safari バージョンでも望ましい動作を再現していることがわかりました。

同じ結果を達成するための正しい方向を教えてください。大変感謝いたします :smiley:

よろしくお願いいたします、
Wouter Vermeersch

@sam が「ハックの山」と呼んでいたのを覚えています。そこへ進むのは、あまりお勧めできませんが。

「いいね!」 2

それはハックの山だと想像できます。私はすでにこの問題に数日間頭を悩ませており、喜んでその山を登る準備ができています :grinning: ..

実際、モバイル版 Safari で入力フィールドにフォーカスしたときに上部の固定バーが持ち上がってしまうのを防ぐために、すでに汚いハックを実装する必要がありました。正直なところ、あの時やったことに比べれば、それほどひどいものにはならないと思います :stuck_out_tongue_closed_eyes:

「いいね!」 2

このひどいハックは、テキストエリアがフォーカスを得た際に要素を位置から引き剥がし、ページ上のすべてを隠すというものでした。そして、テキストエリアがフォーカスを失った際に再び表示するのです。

非常に奇抜なものでした。@pmusaraj がはるかに堅牢な実装を紹介してくれて本当に嬉しいです。

「いいね!」 5

両方のソリューションに関連するコードはこちらです:https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js

ただし、そのファイルに記載されている通り、まもなく iOS 12 向けのハックを削除する予定です。iOS 14 は今年リリースされ、現在も iOS 12 を使用しているデバイスは約 5% だけです。

「いいね!」 4

シェアしてくださりありがとうございます! :smiley:

一応、あなたの回避策をざっと拝見しましたが、すべての異なるキーボードサイズのハードコーディングというアプローチを取られたのですね?

ただし、自動補完が無効化されるとキーボードのサイズが変化しますが、その場合どう対処されているのでしょうか?

iOS 12 を利用しているユーザーの割合がそれほど低いとは知りませんでした。本当に iOS 12 以下が 5% しか残っていないと確信されていますか?もしそうなら、その特定の課題に注力するのは時間の無駄になるかもしれません。

iPhone 6(iOS 2.14 実行中)で確認しました。

オートサジェストが有効な場合は、この回避策は完璧に機能します。オートサジェストが無効になると、隙間が残ってしまいますが、ご指摘の通り、iOS 12 に固執しているユーザーの数は非常に少ないです。さらに、オートサジェストが無効な状態の iOS 12 ユーザーに至っては、その数はさらに少なくなります。

したがって、あなたの修正は私が想像できる中で最善のものだと思います。共有してくれてありがとう!:wink:

公式な数字があるかどうかはわかりませんが、Mixpanel のこのチャートによると、iOS 12 以前は 7% となっています。

iOS 12 向けの修正に注力するのはあなたの努力に見合わないという点には、私も強く賛成します。

「いいね!」 3