前提・実現したいこと
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>
safariはsubmitと他の処理が同時に出来ないとの事だったのでsetTimeoutで処理を遅らせたりしてみましたがアニメーションが処理される事はありませんでした。
補足情報(FW/ツールのバージョンなど)
javascriptはhtml内に記載されております。
回答2件
あなたの回答
tips
プレビュー