title: Svg draw animation lead to page crash in chrome (Aw, Snap page)
body: <p>I made an SVG animation to draw path, I used the common stroke dashoffset technique:</p>
  
  <pre><code>.animate svg path {
      fill-opacity: 0;
      stroke: #848484;
      stroke-width: 1;
      stroke-dasharray: 7200;
      stroke-dashoffset: 7200;
      animation: draw 60s linear 1 forwards;
      -webkit-animation: draw 60s linear 1 forwards;
  }
  </code></pre>
  
  <p>and used @keyframes as following:</p>
  
  <pre><code>@keyframes draw {
     0% {
       stroke-dashoffset: -7200;
     }
     100%{
       stroke-dashoffset: 0;
     }
    }
  
  @-webkit-keyframes draw {
    0% {
      stroke-dashoffset: -7200;
    }
    100%{
      stroke-dashoffset: 0;
    }
  }
  
  @-moz-keyframes draw {
    0% {
      stroke-dashoffset: -7200;
     }
  
    100%{
        stroke-dashoffset: 0;
     }
  
   }
  </code></pre>
  
  <p>I made the duration 60s because the SVG is a building graph with a lot of details (windows, etc.), so in order to get the cool drawing effect I had to make it in long duration to take its time while drawing the building outlines.</p>
  
  <p>Don't worry visitors won't see it for 60 second :), drawing effect will be hidden by the real image after 4 seconds.</p>
  
  <p><strong>preview</strong>: <a href="http://media-clouds.com/ccc/#intro/buildings" rel="nofollow">http://media-clouds.com/ccc/#intro/buildings</a> (it is the second page- open it in firefox to see it)</p>
  
  <p><strong><em>The weird thing, it was working perfectly 3 days ago, very smooth and cool, all good! I even enhanced the page performance by technically making the draw jump to the last frame after 4 seconds (when the real image starts to fade in), like this:</em></strong></p>
  
  <pre><code>@keyframes draw {
     0% {
       stroke-dashoffset: -7200;
     }
  7%{
      stroke-dashoffset: 0;
   }
     8%{
       stroke-dashoffset: 7200;
     }
   100%{
       stroke-dashoffset: 7200;
     }
    }
  </code></pre>
  
  <p>Suddenly today its crashing! and I kept tuning the keyframes rules desperately trying to solve the issue, even for 3 seconds duration it do crash!(and sometimes no!!!)</p>
  
  <p>Hope you could help me on this</p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>I did a workaround to make it work, in javascript I add class <code>.animate</code> which has the draw effect rules in CSS. then I remove the class just before the browser crash ( in my case it crash in the last frame of the animation)</p>
  
  <p>and here is the code as a reference:</p>
  
  <pre><code>$(this).addClass("animate").delay(3000).queue(function(){
  
      $(this).removeClass("animate").dequeue();
  
  });
  </code></pre>
  
  <p>This is just a workaround, not an effective solution that cure the bug from the roots.</p>