title: Animated stroke-dashoffset on iOS
body: <p>So, I have this SVG logo animated by increasing the <code>stroke-dashoffset</code> value</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    position: absolute; top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 150px;
  }
  
  .cls-1,
  .cls-2 {
    fill:none;
    stroke:#a9a9a9;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
  }
  
  .cls-1 {
    stroke-dasharray: 496;
    stroke-dashoffset: -496;
    animation: firstLine 2s ease-out 0s infinite normal;
  }
  
  .cls-2 {
    stroke-dasharray: 458;
    stroke-dashoffset: -458;
    animation: secondLine 2s ease-out 0s infinite normal;
  }
  
  @keyframes firstLine {
    0% { stroke-dashoffset: -496; }
    40% { stroke-dashoffset: 0; }
    60% { stroke-dashoffset: 0; }
    85% { stroke-dashoffset: 496; }
    100% { stroke-dashoffset: 496; }
  }
  
  @keyframes secondLine {
    0% { stroke-dashoffset: -458; }
    45% { stroke-dashoffset: 0; }
    60% { stroke-dashoffset: 0; }
    90% { stroke-dashoffset: 458; }
    100% { stroke-dashoffset: 458; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.17 135"&gt;&lt;path class="cls-1" d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27"/&gt;&lt;path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27"/&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When opened on desktop browser, everything is fine. Same for Android. But on iOS, the animation is going so wrong. Is there some iOS specific bug <code>stroke-dashoffset</code> that I'm not aware of?</p>