form-submit-at-mobile-browser

First

社のプロダクトの方針として，まずはある程度ざっくり Rails の標準的な機能で form を用いたページ遷移ベースの画面を作り，それがうまくいきそうなら SPA なりでユーザ体験をリッチに作り込むための画面を立ち上げていく，という流れを採用している．
その初手の Rails で form_with 使ってババーっと画面を作る工程で，仕様上，バックエンドで数秒オーダーの重めの処理をする必要があったとする．
デザイナがいうには，ユーザを待たせるのだから，モーダルのローディングをオーバレイ付きでアニメーションさせたいとのこと．なるほど，そうですねというわけで検証した内容をせっかくなのでメモしておく．

2022 年にもなって，古臭い検証をしているんだけど，逆にあんままとまってる記事が見つからなかったくらいなので書く．

検証

とりあえず，最小限の検証コードを用意してローカルで試してみる．
ページは一枚用意し，form を submit するときに画像を表示する．バックエンド側では submit を受け取ったら数秒待ってから，そのままページを返す．フローにするとこんな感じ．

Copycopy code to clipboard
[ページ表示] -(onsubmit)-> [ローディング表示] -(submit)-> [バックエンド(数秒 sleep)] --> [ページ再表示]

かんたんに動かせる web サーバということで Rack を使うことにする．
実際の検証コードは こちら
入ってない場合は gem で突っ込んじゃうか，Gemfile 作って bundle install するかしてください¹

こんな感じで起動してください．携帯で見たいので， -o 0.0.0.0 つけています．

Copycopy code to clipboard
% rackup sample.ru -o 0.0.0.0
(略)
* Listening on tcp://0.0.0.0:9292

試しにブラウザで開くと色気もへったくれもない画面が出ます．
※ 検証のために Developer tools でモバイル表示にしています．

送信 を押下すると，ローディング画像が出ます．これが要件でいうところのモーダルのローディングをオーバレイ付きでアニメーションさせる部分です．モーダルとかオーバレイとかは単に css の問題なので検証コードでは省略しています．onsubmit 時に画像が表示できてかつアニメーションできれば問題ないはずです．
というわけで表示できました．アニメーションも動いています(↓のはスクリーンショットなので動いていませんが)．

では，モバイルで見てみます(手元に iPhone11Pro しかないので今回はすべてこれで検証します)．
すべて画像が表示された瞬間にアニメーションが止まってしまいました．

safari

chrome

edge

Safari は検索するとけっこう同じ現象で悩んでいる人がいて(例えばこういうの)
https://stackoverflow.com/questions/28749519/safari-pauses-all-animation-on-redirect-form-submission
https://github.com/hakimel/Ladda/issues/71
概ね解決策としては以下が挙げられるようです．

• Ajax 使う
  • 潔く button の onclick などで FormData を送るパターンと，onsubmit を preventDefault してから Ajax するパターンと紹介されてますがどっちも一緒ですね
• 先に animation を表示させておいて，一定時間くるくる動かしたらおもむろに submit する
  • これだと結局止まっちゃわないかな・・とくに重い処理を待ってほしいようなときは

また，意外とモバイルの chrome ではあまり見つかりませんでした．
(みんなこのご時世に form submit をいちいちするような画面は作ってないんですかね・・)

結果(暫定)

あくまでプロダクトがお客さまに使ってもらえるかどうかの検証用途なので，アニメーションの部分は諦めて，後日，Ajax で対応する感じになりそうです．
なにがアニメーションを止めているのかが結局よくわからないので，継続して調査するつもり・・
ご存知の方いたらこっそり Twitter とかでおしえてください．