title: iOS Safari pauses animation on window.location.href = ...?
body: <p>I have the following code from <a href="https://codepen.io/anon/pen/ZNLyGe" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZNLyGe</a> which displays an waiting-bar animation when the user clicks an icon to navigate to another part of the same website.</p>
  
  <p>The onclick Javascript uses:</p>
  
  <pre><code>window.location.href = strNewURL;
  </code></pre>
  
  <p>It works fine on desktop browsers but on iOS, Safari freezes the animation as soon as it hits the window.location.href line.</p>
  
  <p>Is there some way to prevent iOS Safari from stopping that animation?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="dvProgressBarInfinite" id="dvIDProgressBarInfinite"&gt;
      &lt;div class="indeterminate"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Progress Bar */
  .dvProgressBarInfinite {
      position: absolute;
      height: 2px;
      display: block;
      width: 100%;
      background-color: #cfcfcf;
      border-radius: 2px;
      background-clip: padding-box;
      margin: 0.5rem 0 1rem 0;
      overflow: hidden;
  }
  
  .dvProgressBarInfinite .indeterminate {
      background-color: #000000;
  }
  
  .dvProgressBarInfinite .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }
  
  .dvProgressBarInfinite .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
      animation-delay: 1.15s;
  }
  
  @-webkit-keyframes indeterminate {
      0% {
          left: -35%;
          right: 100%;
      }
  
      60% {
          left: 100%;
          right: -90%;
      }
  
      100% {
          left: 100%;
          right: -90%;
      }
  }
  
  @keyframes indeterminate {
      0% {
          left: -35%;
          right: 100%;
      }
  
      60% {
          left: 100%;
          right: -90%;
      }
  
      100% {
          left: 100%;
          right: -90%;
      }
  }
  
  @-webkit-keyframes indeterminate-short {
      0% {
          left: -200%;
          right: 100%;
      }
  
      60% {
          left: 107%;
          right: -8%;
      }
  
      100% {
          left: 107%;
          right: -8%;
      }
  }
  
  @keyframes indeterminate-short {
      0% {
          left: -200%;
          right: 100%;
      }
  
      60% {
          left: 107%;
          right: -8%;
      }
  
      100% {
          left: 107%;
          right: -8%;
      }
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>function fJToolbar2Click(intColumnNumber)
  {
      var strURL = "&lt;%=strClsToolbar2URLPrefix%&gt;";
      var strURLSuffix = "";
  
      switch(intColumnNumber) {
          case 1:
              strURLSuffix ='&lt;%=strClsToolbar2ClickURLsTarget(1)%&gt;';
              break;
          case 2:
              strURLSuffix ='&lt;%=strClsToolbar2ClickURLsTarget(2)%&gt;';
              break;
          case 3:
              strURLSuffix ='&lt;%=strClsToolbar2ClickURLsTarget(3)%&gt;';
              break;
          case 4:
              strURLSuffix ='&lt;%=strClsToolbar2ClickURLsTarget(4)%&gt;';
              break;
          };
  
      fJProgressIndeterminateShow();
  
      setTimeout(function (){
      window.location.href = strURL + strURLSuffix;  
      }, 200);        
  
  }    
  
  function fJProgressIndeterminateShow()
  {       
     var dv1 = document.getElementById("dvIDProgressBarIndeterminate");
     dv1.style.display="inline-block";        
  }
  </code></pre>