visualViewportのheightを表示するだけのコードを用意します。
このコードをiphoneのsimulatorで見てみます
テキストボックスにfocusされてる(入力できる状態)時に一番下までスクロールするとvisualViewportのheightの値が減ることが確認できると思います。
しかも動画で撮った時は、189pxにも関わらず上のスクショでは、181pxになってます。
とても不安定です。
これは、実機でも同じ挙動でした。
Android(pixel9)エミュレータだと下記のような感じです
一方こちらは、不安定なところもなく、一度決まった値は、動きませんでした。
これも実機(pixel8)でも同じ動きでした。
この記事を書きながら思ったのですが、iphoneの場合は、visualViewportのheightの値がおかしくなるというより、スクロールできちゃいけないところまでスクロールできちゃう問題かなと思いました。
この動きで何が困るかというと、テキストを入力するときにキーボードのすぐ上に張り付くようなメッセージを出したい時です。
少し上にずれますね。pixel8ではずれませんでした。
この件では、有効な解決策が見つかってませんが、見つかればまた更新したいと思います。
Discussion