質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2730閲覧

ブラウザsafariでcssアニメーションを起動させたい。

nre

総合スコア35

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/25 02:45

前提・実現したいこと

ブラウザ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で起動出来ません。

ご回答の程何卒よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryo_y

2019/06/25 03:00

ブラウザのコンソールにエラーの表示等は無いですか?
nre

2019/06/25 03:14

エラー表示はとくに出ないです。 基本的にエラーがあっても起動しないだけになります????
guest

回答1

0

ベストアンサー

Safari は submit 時にレンダリングをやめてしまうようです。
https://stackoverflow.com/questions/32713877/safari-animation-on-form-submit
https://bugs.webkit.org/show_bug.cgi?id=16177
https://qiita.com/snjssk/items/ef6b409a802f2b1aae70

送信をいったん止めてから一定時間後に再び送信すれば動くと思われますが、無駄に待つことになるのでどうなんでしょうね。

jQuery

1 $('form').on('submit', function(event) { 2 $('#loader').fadeIn(); 3 $("#a").blur(); 4 setTimeout(function() { 5 $('form')[0].submit(); 6 }, 400); 7 event.preventDefault(); 8 return false; 9 });

投稿2019/06/25 06:07

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nre

2019/06/25 08:40

大変お忙しい中ご回答していただき誠にありがとうございます。 x_x様のおかげで無事safariでもjsが動きました! 遅延も特に気になる事もございませんでした! 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問