今現在も原因がわかりません。
もし何かわかる方がいらっしゃれば、教えてください。

やりたかったこと

テキストボックスに入力後、submitするとその入力したワードで検索し、検索結果を返す画面を表示する。検索する処理が重いため、submitしたら「Now Loading...」のテキストを画面の上下中央に表示したい。

再現性

Mac Safari, iPhone Safari のどちらでも再現。
一方、Google chromeやFirefox、IE11では再現せず。

なにが起きているか

もともとはsubmit後、bodyにdomをappendし、そのdomをオーバーレイ風にふわっと表示させたかった。appendがダメなのか？単にbodyのstyleを変更するだけなら、、で試してみたがダメだった。それが下記。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <style>
  form {
    margin-bottom: 60px;
  }
  p {
    margin: 10px 0;
  }
  </style>
</head>
<body>

  <h2>Javascript</h2>
  <form id="form1" method="" action="">
    <label>form1：<input type="text"></label>
    <p>Enterでsubmitすると、safariは背景色がピンクに変わってくれない。</p>
  </form>
  <form id="form2" method="" action="">
    <label>form2：<input type="text"></label>
    <p>ちょっと処理をずらす対応を入れた。</p>
  </form>
  <hr />

  <h2>jQuery</h2>
  <form id="form3" method="" action="">
    <label>form3：<input type="text"></label>
    <p>Enterでsubmitすると、safariは背景色が黄色に変わってくれない。</p>
  </form>
  <form id="form4" method="" action="">
    <label>form4：<input type="text"></label>
    <p>ちょっと処理をずらす対応を入れた。</p>
  </form>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
(function(){
  var elem1 = document.getElementById('form1');
  elem1.addEventListener('submit', function() {
    document.body.style.backgroundColor = 'pink';
    console.log('form1 submit');
  });

  var elem2 = document.getElementById('form2');
  elem2.addEventListener('submit', function(e) {
    //submitをキャンセルにして
    e.preventDefault();
    document.body.style.backgroundColor = 'pink';
    //ちょっとずらしてsubmit
    setTimeout(function(){
      elem2.submit();
    }, 300);
    console.log('form2 submit');
  });
}());

$(function(){
  $('#form3').submit(function(){
    $('body').css('background-color', 'yellow');
    console.log('form3 submit');
  });

  $('#form4').submit(function(e){
    e.preventDefault();
    $('body').css('background-color', 'yellow');
    setTimeout(function(){
      $('#form4').off('submit');
      $('#form4').submit();
    }, 300);
    console.log('form4 submit');
  });
});
</script>
</body>
</html>

demo（Safariで開いてみてください。）
http://snjssk.com/temp/qiita_formtest/

回避策

回避策と言って良いのか微妙。
無理やり感があるため、ブラウザー判定を入れて、Safariだけはちょっと処理をずらすみたいなことにしておけばいいのかなぁー。。

いろいろ調べてみると、submitと同時に何かさせるとダメみたい？
ちょっと処理をずらすと良いみたい？
http://stackoverflow.com/questions/9934803/show-div-upon-form-submit-works-in-chrome-ff-ie-but-not-safari

Safari submit の後処理がうまくいかない件

やりたかったこと

再現性

なにが起きているか

回避策