title: SVG animation appears "out of bounds" on IE & Edge
body: <p>I'm having an issue that only appears to affect IE and Edge (tested on IE9-11 &amp; Edge 12-13). I'm animating an SVG stroke offset with Snap.svg which seems to run fine but at certain points the stroke appears to go "out of bounds" and disappear. It's odd since the viewBox is set to clearly fit the line (it was exported directly from Illustrator with an artboard that fit the entire line).</p>
  
  <p>You can see this in action here: <a href="http://codepen.io/ndimatteo/full/zqLBVW/" rel="noreferrer">http://codepen.io/ndimatteo/full/zqLBVW/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// SSSSSNAKE
  var snake = Snap('#snake-preview svg');
  var bodyPath = snake.select('#snake-body');
  
  var bodyPathBreakfast = snake.select('#snake-body-breakfast');
  var bodyPathLunch = snake.select('#snake-body-lunch');
  var bodyPathDinner = snake.select('#snake-body-dinner');
  
  var headPath = snake.select('#snake-head');
  
  // Draw Path
  var bodyLength = bodyPath.getTotalLength();
  var headLength = headPath.getTotalLength();
  
  function snakeAnim() {
  
    //reset food
    setTimeout(function() {
      $('#snake-body-dinner').hide();
      snake.animate({ opacity: 1}, 200);
      $('#food-1').show();
    }, 1000);
  
    // breakfast
    setTimeout( function() {
      $('#food-1').hide();
      $('#food-2, #snake-body-breakfast').show();
    }, 2000);
    
    // lunch
    setTimeout( function() {
      $('#food-2, #snake-body-breakfast').hide();
      $('#food-3, #snake-body-lunch').show();
    }, 7000);
  
    // dinner
    setTimeout( function() {
      $('#food-3, #snake-body-lunch').hide();
      $('#snake-body-dinner').show();
    }, 12800);
  
    // death
    setTimeout( function() {
      snake.animate({ opacity: 0}, 200, snakeAnim);
    }, 14800);
  
    // give it a head
    headPath.attr({
      "stroke-dasharray": 1 + ' ' + headLength,
      "stroke-dashoffset": 0
    }).animate({
      "stroke-dashoffset": -headLength
    }, 15000, mina.linear);
  
    // breakfast bite
    bodyPathBreakfast.attr({
      "stroke-dasharray": 250 + ' ' + (bodyLength-250),
      "stroke-dashoffset": 250
    }).animate({
      "stroke-dashoffset": -bodyLength+250
    }, 15000, mina.linear);
  
    // lunch bite
    bodyPathLunch.attr({
      "stroke-dasharray": 300 + ' ' + (bodyLength-300),
      "stroke-dashoffset": 300
    }).animate({
      "stroke-dashoffset": -bodyLength+300
    }, 15000, mina.linear);
  
    // dinner bite
    bodyPathDinner.attr({
      "stroke-dasharray": 350 + ' ' + (bodyLength-350),
      "stroke-dashoffset": 350
    }).animate({
      "stroke-dashoffset": -bodyLength+350
    }, 15000, mina.linear);
    
    // hungry snake
    bodyPath.attr({
      "stroke-dasharray": 200 + ' ' + (bodyLength-200),
      "stroke-dashoffset": 200
    }).animate({
      "stroke-dashoffset": -bodyLength+200
    }, 15000, mina.linear);
  }
  
  snakeAnim();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    background: #fcd835;
    text-align: center;
    height: 100%;
  }
  
  #snake-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  #snake-preview svg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  #snake-preview svg #food-1,
  #snake-preview svg #food-2,
  #snake-preview svg #food-3,
  #snake-preview svg #snake-body-breakfast,
  #snake-preview svg #snake-body-lunch,
  #snake-preview svg #snake-body-dinner {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="snake-preview"&gt;
    &lt;svg viewBox="0 0 800 400"&gt;&lt;rect x="313.91" y="230.68" width="14.14" height="14.14" transform="translate(-74.1 296.61) rotate(-45)" fill="#304fff" id="food-1"/&gt;&lt;rect x="547.1" y="116.93" width="14.14" height="14.14" transform="translate(74.63 428.17) rotate(-45)" fill="#304fff" id="food-2"/&gt;&lt;rect x="423.93" y="262.93" width="14.14" height="14.14" transform="translate(-64.68 383.84) rotate(-45)" fill="#304fff" id="food-3"/&gt;&lt;path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body"/&gt;&lt;path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-breakfast"/&gt;&lt;path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-lunch"/&gt;&lt;path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ff1644" stroke-miterlimit="10" stroke-width="20" id="snake-body-dinner"/&gt;&lt;path d="M0 164.25 320.98 164.25 320.98 237.75 424.16 237.75 424.16 191.25 494.98 191.25 494.98 68.26 524.52 68.26 524.52 291.74 647.98 291.74 647.98 124 386 124 386 322 242 322 242 79 431 79 431 322 800 322" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="20" stroke-dasharray="1 2000" stroke-linecap="round" id="snake-head"/&gt;&lt;/svg&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>