iPhoneのSafariブラウザでのみgifファイルが動かない

Question

いつもお世話になっております。

現在Railsでウェブページを作成しております。
以下のようにフォームを作り、submitを押した場合に「送信中」メッセージとgifを表示しようとしております。ボタンを押すまではCSSで非表示にしております。

PCやandroid端末ではgifが動くのですが、iPhoneのSafariブラウザでは動きません（静止画像状態です）。iPhoneは6sと8で確認しました。

どのようなことが考えられますでしょうか。
ご教示いただけますと幸いです。
よろしくお願いいたします。

#show.html.erb
  <script>
  function send_btn_on(){
    document.getElementById("loading").style.display="block";
  } 
  </script>

  <div class="post_form">
  <%= form_with(model: @user_info, local: true, html: {id: 'inform_save', class: 'form', autocomplete: 'off'}) do |f| %>
　　・
　　・　省略
　　・
    <div id="loading">
      送信中です</br>
      <%= image_tag('sending.gif') %>
    </div>
    <div class="send_btn_field">
      <%= f.submit '', id: 'send_btn', data: { disable_with: "送信中..." }, onclick:"send_btn_on()"%>
    </div>
  </div>


CSS
#loading {
  display: none;
}

Answer 1

こういうことでは？
http://ascii.jp/elem/000/001/072/1072183/

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。なるほど、こういう事象があるのですね。
たびたびの質問で恐縮ですが、具体的な対策てしてはどのようなことが考えられますでしょうか。

Answer 2

どのような gif を表示しているのか解りませんが
下記の様な CSS + JavaScript で対応するのはいかがでしょうか？

https://github.com/hakimel/Ladda

デモ
https://lab.hakim.se/ladda/