前提・実現したいこと
ブラウザsafariで起動したwebアプリケーション画面で、
商品を検索すると処理中の間にcssアニメーションを表示出来る様にしたいです。
Flaskで開発したWebアプリケーションとなっております。
ブラウザchromeでは問題なく、
検索から処理完了までの間にアニメーションが表示されるのですが
何故かブラウザsafariではjavascripytが上手く作動しなく
アニメーションが起動しないです。
該当のソースコード
html
1 <form method="get" action="/output"> 2 <input type="text" id=a name="name" style="width:350px;" 3 class='sample' placeholder="商品を入力して下さい"> 4 </form> 5 6 <div id="loader"> 7 <div class="dot"></div> 8 <div class="dot"></div> 9 <div class="dot"></div> 10 Searching…Now<br> 11 Please wait 20 sec 12 </div> 13 14 <script> 15 $(function(){ 16 $('#loader').hide(); 17 $('form').on('submit',function(){ 18 $('#loader').fadeIn(); 19 $("#a").blur(); 20 }); 21 }); 22 </script>
css
1 2main{ 3 4 max-width:100%; 5 6} 7 8h1{ 9 10 font-size: 400%; 11 12} 13 14 15p { 16 font-size: 15px; 17 18 19} 20 21 22 23.font_test { 24 font-size: 150%; /* 文字サイズ指定 */ 25 color: #bf0100; /* 文字色指定 */ 26} 27 28.font_tes{ 29 color: #bf0100; 30} 31body { 32 text-align: center; 33 background-color: #eee; 34 position:relative; 35 overflow: hidden; 36} 37 38* { 39 -webkit-box-sizing: border-box; 40 -moz-box-sizing: border-box; 41 box-sizing: border-box; 42} 43 44 45/* The loader container */ 46#loader { 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 51 width: 200px; 52 height: 200px; 53 54 margin-top: 115px; 55 margin-left: -100px; 56 57 perspective: 200px; 58 transform-type: preserve-3d; 59 } 60 61 62/* The dot */ 63.dot { 64 position: absolute; 65 top: 50%; 66 left: 50%; 67 68 width: 120px; 69 height: 120px; 70 71 margin-top: -60px; 72 margin-left: -60px; 73 74 border-radius: 100px; 75 border: 40px outset #1e3f57; 76 77 transform-type: preserve-3d; 78 transform-origin: 50% 50%; 79 80 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 81 82 background-color: transparent; 83 84 animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite; 85} 86 87.dot:nth-child(2) { 88 width: 140px; 89 height: 140px; 90 91 margin-top: -70px; 92 margin-left: -70px; 93 94 border-width: 30px; 95 border-color: #447891; 96 97 animation-name: dot2; 98 animation-delay: 75ms; 99 100 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 101 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 102} 103 104.dot:nth-child(3) { 105 width: 160px; 106 height: 160px; 107 108 margin-top: -80px; 109 margin-left: -80px; 110 111 border-width: 20px; 112 border-color: #6bb2cd; 113 114 animation-name: dot3; 115 animation-delay: 150ms; 116 117 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 118 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 119} 120 121@keyframes dot1 { 122 0% { 123 border-color: #772525; 124 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 125 } 126 50% { 127 border-color: #774025; 128 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 129 } 130 100% { 131 border-color: #772525; 132 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 133 } 134} 135 136@keyframes dot2 { 137 0% { 138 border-color: #b54c4c; 139 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 140 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 141 } 142 50% { 143 border-color: #b56741; 144 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 145 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 146 } 147 100% { 148 border-color: #b54c4c; 149 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 150 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 151 } 152} 153 154@keyframes dot3 { 155 0% { 156 border-color: #e05555; 157 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 158 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 159 } 160 50% { 161 border-color: #e08355; 162 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 163 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 164 } 165 100% { 166 border-color: #e05555; 167 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 168 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 169 } 170} 171
試したこと
safariのデフォルト関連をオフにする為、css内に-webkit-appearance:none;を適用→意味なし
safariはsubmit時他の処理が出来ないと見たので時間差で起動↓
script内にsetTimeout(gogo,1);でfunction gogo()を試しても起動しませんでした
補足情報(FW/ツールのバージョンなど)
html5,css,javascript,jQuery,python3
フレームワーク:Flask
環境:paizacloud
スマホ、pc共にsafariで起動出来ません。
ご回答の程何卒よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー