Safariで送信ボタン押すと、送信以外の処理が止まっちゃうんです。
今日、仕事中に発見して、一日掛けてひたすら調べまくったことを忘れないようにまとめていきます。
Safariでsubmitするとbrowserのdrowing機能がstopなんです。
安心してください。これで終わりじゃないです。ちゃんと解説書いていきます笑
事象としては、サイトの入力フォームの送信ボタンを押した際に、いわゆるローディング画像を表示してたんですが、
「なんかSafariだと動いてないんだけど。明後日リリースなんだけど？」
という恐ろしい連絡がありまして。急遽調査。
ちなみにロード画像はこんなやつ。画像と言っておきながらcssで描画が可能という優れもの
Loading...
そうすると出てくる出てくる。Safariで動かない問題 笑
内容をまとめると、「他画面との通信を開始すると画面の描画をストップする」という性質の様です。（Safariの独自実装）
chromeやfirefoxではちゃんと送信ボタンを押してからもローディング画像がくるくる回っているのですが、Safariだけ...ね。
Safariでsubmitするときにローディング画像を表示したい！！
結論から言うと、アニメーション付きのやつは無理でした。
gifアニメ画像、cssアニメーション、javascriptなど色々試しては見ましたが、結局描画処理そのものがストップしてしまう為、送信処理以降は何をやっても画面は動作しませんでした。
chromeとかはOKですよ。
setTimeout使ったり、背景画像として指定することで解決します、という情報もよく見ますが、すべて小手先解決でした。
背景画像化はやっぱり描画で着ずに止まってしまいますし、setTimeoutに至っては、アニメーションを0.5秒動かしてからsubmitを起動するという単純に処理時間を0.5秒伸ばすというよく分からない対策...。
さて。そのままSafariはアニメーションが動かないって流れでOKというならば全然定時上がりなんですけど、まぁそんなに仕事は楽じゃないですよね...
ってことで何か対策は無いかと考えているのですが、もう描画機能がストップしちゃっているので、静止画で対策するしかないかなぁと。
ユーザエージェントからSafariを判定して、その時だけローディングアニメーションではなく、ローディングの静止画を出すかなと。
んー。他に何か良い対策はないですかねぇ。今日は一日調査に頭を使ったので、後半使いものにならず、これくらいしか思い付きませんでした...。
リリースまで残り1日！脳みそフル回転で明日も仕事しますよ！！！！
社畜なFeADうぇずでした！
