safariでsubmitした時にjQueryでの処理が実行されません

前提・実現したいこと

safariで検索した時(submit)に、cssアニメーションを表示できる様にしたいです。

発生している問題・エラーメッセージ

chromeでは検索時に隠れていたcssローディングアニメーションが表示されるのに、
safariでは表示されません。(クロームはPC,スマホでも問題なく動作確認済み)

該当のソースコード

HTML
1<form method="get" action="/output">
2        <input type="text" id=a name="name" style="width:350px;" 
3        class='sample' placeholder="商品を入力して下さい">
4    </form>

javascript
1<script>
2    $(function(){
3        $('#loader').hide();
4        $('form').on('submit',function(){
5             $('#loader').fadeIn();
6             $("#a").blur();
7        });
8    });
9    </script>

css
1main{
2
3    max-width:100%;
4   
5}
6
7h1{
8    
9    font-size: 400%;
10  　
11}
12
13
14p {
15    font-size: 15px;
16
17    
18}    
19
20
21
22.font_test {
23    font-size: 150%;    /* 文字サイズ指定 */
24    color: #bf0100;     /* 文字色指定 */
25}
26
27.font_tes{
28    color: #bf0100;
29}
30body {
31  text-align: center;
32  background-color: #eee;
33  position:relative;
34  overflow: hidden;
35}
36
37* {
38  -webkit-box-sizing: border-box;
39     -moz-box-sizing: border-box;
40          box-sizing: border-box;
41}
42
43
44/* The loader container */
45#loader {
46  position: absolute;
47  top: 50%;
48  left: 50%;
49  
50  width: 200px;
51  height: 200px;
52  
53  margin-top: 115px;
54  margin-left: -100px;
55  
56  perspective: 200px;
57  transform-type: preserve-3d;
58 }
59
60
61/* The dot */
62.dot {
63  position: absolute;
64  top: 50%;
65  left: 50%;
66
67  width: 120px;
68  height: 120px;
69  
70  margin-top: -60px;
71  margin-left: -60px;
72  
73  border-radius: 100px;
74  border: 40px outset #1e3f57;
75
76  transform-type: preserve-3d;
77  transform-origin: 50% 50%;
78  
79  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
80  
81  background-color: transparent;
82  
83  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
84}
85
86.dot:nth-child(2) {
87  width: 140px;
88  height: 140px;
89  
90  margin-top: -70px;
91  margin-left: -70px;
92  
93  border-width: 30px;
94  border-color: #447891;
95  
96  animation-name: dot2;
97  animation-delay: 75ms;
98  
99  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
100  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
101}
102
103.dot:nth-child(3) {
104  width: 160px;
105  height: 160px;
106  
107  margin-top: -80px;
108  margin-left: -80px;
109  
110  border-width: 20px;
111  border-color: #6bb2cd;
112  
113  animation-name: dot3;
114  animation-delay: 150ms;
115  
116  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
117  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
118}
119
120@keyframes dot1 {
121  0% {
122    border-color: #772525;
123    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
124  }
125  50% {
126    border-color: #774025;
127    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
128  }
129  100% {
130    border-color: #772525;
131    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
132  }
133}
134
135@keyframes dot2 {
136  0% {
137    border-color: #b54c4c;
138    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
139    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
140  }
141  50% {
142    border-color: #b56741;
143    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
144    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
145  }
146  100% {
147    border-color: #b54c4c;
148    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
149    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
150  }
151}
152
153@keyframes dot3 {
154  0% {
155    border-color: #e05555;
156    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
157    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
158  }
159  50% {
160    border-color: #e08355;
161    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
162    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
163  }
164  100% {
165    border-color: #e05555;
166    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
167    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
168  }
169}
170

試したこと

javascript
1<script>
2    $(function(){
3        $('#loader').hide();
4        $('form').on('submit',function(){
5             setTimeout(gogo,1)
6        });
7    });
8    function gogo(){
9        $('#loader').fadeIn();
10            $("#a").blur();
11}
12
13    </script>