Safariはフォームの送信時にCSS3アニメーションを一時停止またはリダイレクト

フォームを送信するときに、ページの中央にスピナーを表示する簡単なWebページを開発しています。 Chromeで動作しますが、Safariではフォームが送信されるとすぐにCSSアニメーションが停止します。アニメーションは2秒間であるため、アニメーションはまったく実行されません。Safariはフォームの送信時にCSS3アニメーションを一時停止またはリダイレクト

これは、問題を再現するためのHTML、CSS、JS全体です。内容をHTMLファイルに保存し、まずChromeで開き、動作を確認してSafariで開き、問題を確認します。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <style> 
     .circular { 
     display: inline-block; 
     height: 60px; 
     left: 50%; 
     margin-left: -30px; 
     margin-top: -30px; 
     position: fixed; 
     top: 50%; 
     transform: rotate(-90deg); 
     width: 60px; 
     } 
     .circle { 
     animation: circular-indeterminate-bar-rotate 2s linear infinite; 
     box-sizing: border-box; 
     height: 100%; 
     width: 100%; 
     } 
     .path { 
     animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite; 
     fill: none; 
     stroke: rgba(12,18,28, 0.87); 
     stroke-dasharray: 1.25, 250; 
     stroke-dashoffset: 0; 
     stroke-linecap: round; 
     stroke-miterlimit: 20; 
     stroke-width: 4; 
     transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1); 
     } 

     @keyframes circular-indeterminate-bar-rotate { 
     to { 
      transform: rotate(1turn); 
     } 
     } 

     @keyframes circular-indeterminate-bar-dash { 
     0% { 
      stroke-dasharray: 1.25, 250; 
      stroke-dashoffset: 0; 
     } 

     50% { 
      stroke-dasharray: 111.25, 250; 
      stroke-dashoffset: -43.75; 
     } 

     to { 
      stroke-dasharray: 111.25, 250; 
      stroke-dashoffset: -155; 
     } 
     } 
    </style> 
    </head> 
    <body> 
    <div class="circular"> 
     <svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg> 
    </div> 
    <script> 
     window.location.href = 'http://httpbin.org/delay/100'; 
    </script> 
    </body> 
</html>

出典

2017-10-31 Encore PTL

CSSのベンダープレフィックスを追加します。 –

@MerajKhan私はしましたが、それは助けにはなりません。あなたは自分の質問にあるコードで自分で試すことができます。 –

ああ、私は今、dasharrayのアニメーションは停止しますが、回転はありません。興味深い、なぜ回避策を見つけることができません。あなたの最善の賭け？ Safariに問題を提起する。 'fill'プロパティも関係しますが、' transform'も 'filter'も関係しません。 – Kaiido

これはSafariでも機能します。

.circular { 
 
     display: inline-block; 
 
     height: 60px; 
 
     left: 50%; 
 
     margin-left: -30px; 
 
     margin-top: -30px; 
 
     position: fixed; 
 
     top: 50%; 
 
     -webkit-transform: rotate(-90deg); 
 
      -ms-transform: rotate(-90deg); 
 
       transform: rotate(-90deg); 
 
     width: 60px; 
 
     } 
 
     .circle { 
 
     -webkit-animation: circular-indeterminate-bar-rotate 2s linear infinite; 
 
       animation: circular-indeterminate-bar-rotate 2s linear infinite; 
 
     -webkit-box-sizing: border-box; 
 
       box-sizing: border-box; 
 
     height: 100%; 
 
     width: 100%; 
 
     } 
 
     .path { 
 
     -webkit-animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite; 
 
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite; 
 
     fill: none; 
 
     stroke: rgba(12,18,28, 0.87); 
 
     stroke-dasharray: 1.25, 250; 
 
     stroke-dashoffset: 0; 
 
     stroke-linecap: round; 
 
     stroke-miterlimit: 20; 
 
     stroke-width: 4; 
 
     -webkit-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1); 
 
     -o-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1); 
 
     transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1); 
 
     } 
 

 
     @-webkit-keyframes circular-indeterminate-bar-rotate { 
 
     to { 
 
      -webkit-transform: rotate(1turn); 
 
        transform: rotate(1turn); 
 
     } 
 
     } 
 

 
     @keyframes circular-indeterminate-bar-rotate { 
 
     to { 
 
      -webkit-transform: rotate(1turn); 
 
        transform: rotate(1turn); 
 
     } 
 
     } 
 

 
     @-webkit-keyframes circular-indeterminate-bar-dash { 
 
     0% { 
 
      stroke-dasharray: 1.25, 250; 
 
      stroke-dashoffset: 0; 
 
     } 
 

 
     50% { 
 
      stroke-dasharray: 111.25, 250; 
 
      stroke-dashoffset: -43.75; 
 
     } 
 

 
     to { 
 
      stroke-dasharray: 111.25, 250; 
 
      stroke-dashoffset: -155; 
 
     } 
 
     } 
 

 
     @keyframes circular-indeterminate-bar-dash { 
 
     0% { 
 
      stroke-dasharray: 1.25, 250; 
 
      stroke-dashoffset: 0; 
 
     } 
 

 
     50% { 
 
      stroke-dasharray: 111.25, 250; 
 
      stroke-dashoffset: -43.75; 
 
     } 
 

 
     to { 
 
      stroke-dasharray: 111.25, 250; 
 
      stroke-dashoffset: -155; 
 
     } 
 
     }

<div class="circular"> 
 
     <svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg> 
 
    </div>

出典

2017-11-03 05:07:31

あなたはおそらく質問を受け取りませんでした。 OPの問題は、ページがアンロードされたときにアニメーションが停止することです（しかし、実際にはそれが実際にやって来る前でさえ）。そうでなければアニメーションに問題はありません。 – Kaiido

Safariはフォームの送信時にCSS3アニメーションを一時停止またはリダイレクト

答えて

関連する問題