iphoneでbackground画像が表示されない

前提・実現したいこと

Flaskを使用したWEBアプリケーションを作成しているプログラミング初心者です。
アプリケーション内で、送信ボタンを押してデータが処理されるまでの間にローディングのgif画像を表示するような仕組みを作っています。
実際にHerokuを用いてデプロイをしてみたのですが、iphoneだけローディング画面が表示されません。
PCやAndroidでは正常に機能していることを確認しています。
また、Google Chromeの開発者ツールでは、どのデバイスでも表示されることを確認しています。
クリックイベントにエラーがあるのか、backgroundの設定にエラーがあるのか分からないので、教えて頂きたいです。

該当のソースコード

HTML
1<div class = "botton">
2    <input id="send_button" type="submit" value="送信" style="width:100px; height:30px" onclick="loading();">
3    <!--loading画面設定-->
4    <script type="text/javascript">
5        function loading(){
6        $("#loading").show();
7        $("#loading_hide").hide();       
8    }
9    </script>
10</div>

css
1div#loading {
2  width: 100%;
3  height: 100%;
4  display: none;
5  background: url(/static/img/loading_1200px.gif) no-repeat;
6  cursor: wait;
7  position: fixed;
8  left: 50%;
9  margin-left: -600px;
10}
11@media screen and (max-width:380px){
12  div#loading {
13    background: url(/static/img/loading_350px.gif) no-repeat;
14    margin-left: -175px;
15  }
16}