<textarea>フォーカス時のアニメーションについてiOSでうまく動作しない

Question

スマホで、テキストエリアにフォーカスした時、入力エリアが画面いっぱいに広がるアニメーションをつけました。

・フォーカス時：入力エリア画面いっぱい
・キーボードの完了をタップ：もとの大きさに戻る

このようなことをしたいです。
iOSのSafariで確認した結果、フォーカス時に立ち上がったキーボードのタイプによって上手く動作しません。

もし原因がわかる方いたらご指摘お願いします。

詳細は下記にまとめました。

立ち上がったキーボードがテンキーの場合

フルキーボードに変換して入力してから「完了」をタップしても元の大きさに戻らない

立ち上がったキーボードがフルキーボードの場合

逆も然りです。
テンキーに変換して入力してから「完了」をタップしても元の大きさに戻らない

例外的にうまく動作する場合

上記の条件で下記のパターンだけは元の大きさに戻りました。ですが、ほとんどの場合にはうまく動作しません。

・1文字入力
・改行
・完了
→OK

・1文字入力
・空白
・完了
→OK

コード

      <div class="form_area">      
       <form>
        <textarea id="test" name="test" cols="28" rows="10"  wrap="soft" placeholder="テキスト入力"></textarea>
       </form>   
      </div>

.form_area {
    padding: 20px 0;
    width: 86%;
    margin: 10% auto 0;
    background:#ddd;
    background-size:cover;
    transition: all 0.5s;
}

#test{
 font-size:24px;
 line-height:150%;
 width: 100%;
 height: 54vh;
 padding: 20px;
 resize: none;
 display: block;
 margin: 0 auto; 
}

#test:focus {
 outline: 0;
 height: 40vh!important;
}

.form_area:focus-within {
 outline: 0;
 margin-top: 0;
 width: 100%;
 height: 100vh;
 transition: all 0.5s;
 touch-action: none;
}

Answer 1

viewportは設定されてますか？

強引なやり方だと、
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
maximum-scaleをセットすると、ちゃんと動作するかもしれません。

あと、老婆心ですが、スマートフォンのデバイスキーボード対応は、バージョンアップなどで仕様がコロコロ変わるので、あまり深く追求せずに、全体的な対応をする思考で居たほうがいいですよ。

Comments

[treevillage]

ありがとうございます。
viewport設定しています。少し書き方が違ったので、いただいたコードに差し替えましたが、やはりうまく動作しませんでした…。

デバイスキーボードの仕様はコロコロ変わるんですね。悩ましいです…。

[geta]

こちらでは正常に動作しているので、もっと根本的な原因かもしれませんね。
事象の再現性などがこちらでわかれば、お教えできるのですが・・・
現時点での情報ではこれ以上深入りしない方が良さそうですね。

iOSのデバイスキーボードは、サードパーティも許可されるようになっているので、恐らく追いきれないと思います。