Javascript Safari在提交表单或重定向时暂停CSS3动画_Javascript_Html_Css_Safari

Javascript Safari在提交表单或重定向时暂停CSS3动画

javascript html css safari

Javascript Safari在提交表单或重定向时暂停CSS3动画,javascript,html,css,safari,Javascript,Html,Css,Safari,我正在开发一个简单的网页，我想在提交表单时在页面中心显示一个微调器。它在Chrome中工作，但在Safari中，一旦表单提交，CSS动画就会停止。由于动画长度为2秒，因此它根本不执行动画这是整个HTML、CSS和JS的复制问题。将内容保存在一个HTML文件中，首先在Chrome中打开它以查看其行为，然后在Safari中打开以查看问题 <!DOCTYPE html> <html lang="en"> <head> <style>

我正在开发一个简单的网页，我想在提交表单时在页面中心显示一个微调器。它在Chrome中工作，但在Safari中，一旦表单提交，CSS动画就会停止。由于动画长度为2秒，因此它根本不执行动画

这是整个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>


.通告{
显示：内联块；
高度：60px；
左：50%；
左边距：-30px；
利润上限：-30px；
位置：固定；
最高：50%；
变换：旋转（-90度）；
宽度：60px；
}
.圆圈{
动画：圆形不确定杆旋转2s线性无限；
框大小：边框框；
身高：100%；
宽度：100%；
}
.路径{
动画：圆形不定横线1.5s缓进无限出；
填充：无；
卒中：rgba（12,18,28,0.87）；
行程数组：1.25250；
笔划偏移：0；
笔划线头：圆形；
行程限制：20；
笔画宽度：4；
过渡：笔划dasharray.35s三次贝塞尔（.4,0,2,1）；
}
@关键帧圆形不确定杆旋转{
到{
变换：旋转（1圈）；
}
}
@关键帧圆形不确定横线{
0% {
行程数组：1.25250；
笔划偏移：0；
}
50% {
行程数组：111.25250；
行程偏移：-43.75；
}
到{
行程数组：111.25250；
行程偏移：-155；
}
}
window.location.href=http://httpbin.org/delay/100';

这在safari中也能正常工作

。循环{
显示：内联块；
高度：60px；
左：50%；
左边距：-30px；
利润上限：-30px；
位置：固定；
最高：50%；
-webkit变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
宽度：60px；
}
.圆圈{
-webkit动画：圆形不确定杆旋转2s线性无限；
动画：圆形不确定杆旋转2s线性无限；
-webkit框大小：边框框；
框大小：边框框；
身高：100%；
宽度：100%；
}
.路径{
-webkit动画：圆形不定横线1.5s缓进无限出；
动画：圆形不定横线1.5s缓进无限出；
填充：无；
卒中：rgba（12,18,28,0.87）；
行程数组：1.25250；
笔划偏移：0；
笔划线头：圆形；
行程限制：20；
笔画宽度：4；
-webkit转换：笔划dasharray.35s立方贝塞尔（.4,0,2,1）；
-o型过渡：笔划dasharray.35s立方贝塞尔（.4,0,2,1）；
过渡：笔划dasharray.35s三次贝塞尔（.4,0,2,1）；
}
@-webkit关键帧圆形不确定杆旋转{
到{
-webkit变换：旋转（1圈）；
变换：旋转（1圈）；
}
}
@关键帧圆形不确定杆旋转{
到{
-webkit变换：旋转（1圈）；
变换：旋转（1圈）；
}
}
@-webkit关键帧圆形不确定横线{
0% {
行程数组：1.25250；
笔划偏移：0；
}
50% {
行程数组：111.25250；
行程偏移：-43.75；
}
到{
行程数组：111.25250；
行程偏移：-155；
}
}
@关键帧圆形不确定横线{
0% {
行程数组：1.25250；
笔划偏移：0；
}
50% {
行程数组：111.25250；
行程偏移：-43.75；
}
到{
行程数组：111.25250；
行程偏移：-155；
}
}

这在safari中也能正常工作

。循环{
显示：内联块；
高度：60px；
左：50%；
左边距：-30px；
利润上限：-30px；
位置：固定；
最高：50%；
-webkit变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
宽度：60px；
}
.圆圈{
-webkit动画：圆形不确定杆旋转2s线性无限；
动画：圆形不确定杆旋转2s线性无限；
-webkit框大小：边框框；
框大小：边框框；
身高：100%；
宽度：100%；
}
.路径{
-webkit动画：圆形不定横线1.5s缓进无限出；
动画：圆形不定横线1.5s缓进无限出；
填充：无；
卒中：rgba（12,18,28,0.87）；
行程数组：1.25250；
笔划偏移：0；
笔划线头：圆形；
行程限制：20；
笔画宽度：4；
-webkit转换：笔划dasharray.35s立方贝塞尔（.4,0,2,1）；
-o型过渡：笔划dasharray.35s立方贝塞尔（.4,0,2,1）；
过渡：笔划dasharray.35s三次贝塞尔（.4,0,2,1）；
}
@-webkit关键帧圆形不确定杆旋转{
到{
-webkit变换：旋转（1圈）；
变换：旋转（1圈）；
}
}
@关键帧圆形不确定杆旋转{
到{