SVG animation appears "out of bounds" on IE & Edge

Question

I'm having an issue that only appears to affect IE and Edge (tested on IE9-11 & 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).

You can see this in action here: http://codepen.io/ndimatteo/full/zqLBVW/

// 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();

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="snake-preview">
  <svg viewBox="0 0 800 400"><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/></svg>
  </div>

Answer 1

I have reach good result with IE11 by next both changes.

Add to SVG tag version and style:

<svg 
    viewBox="0 0 800 400"  
    version="1.1"
    style="
        shape-rendering:auto; 
        text-rendering:auto; 
        image-rendering:auto; 
        fill-rule:evenodd; 
        clip-rule:evenodd"
>

And enable in IE emulating Edge mode:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

But by adding this field to (codepen.io) /Settings/HTML/Stuff to <head>/ no changes in head, so I have enable this mode by F12/Document mode/Edge (don't forget to press F5).

I hope this will help you.