IE / Edge SVG loading/rendering issue

Question

When I open my website in Microsoft Edge, Everything looks mostly okay, except that the left-hand side of the logo does not keep time with the right-hand side -- the B comes in nice and smooth, but the S is slightly behind in timing and very jerky. Refreshed several times and it is always exactly the same. Also, if I scroll down and back up to the top in Edge, the S is sometimes only partly drawn (i,e. the bottom of it is missing) even though it was drawn completely when I first open the page.

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
#logo {
  animation: bounce-in 700ms ease-in-out forwards;
  margin-bottom: 20px;
  max-height: 70vh;
}
.s {
  transform-origin: 50% 50%;
  stroke-dasharray: 128px;
  stroke-dashoffset: -128px;
  animation: draw-s 1500ms 500ms forwards;
}
.b-back {
  transform-origin: 50% 50%;
  stroke-dasharray: 93px;
  stroke-dashoffset: -93px;
  animation: draw-b-back 1500ms 500ms forwards;
}
.b-front-2 {
  transform-origin: 50% 50%;
  stroke-dasharray: 124px;
  animation: draw-b-front 1500ms 500ms forwards;
  transform: translateX(-0.2px);
}
.logo-shadow {
  opacity: 0;
  animation: draw-shadow 1s ease 1500ms forwards;
}
@keyframes draw-s {
  from {
    stroke-dashoffset: 128px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes draw-b-back {
  from {
    stroke-dashoffset: 93px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes draw-b-front {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 124px;
  }
}
@keyframes draw-shadow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 120.8">
  <style>
    .logo-circle {
      fill: #3BB383;
    }
    .logo-shadow {
      fill: #349F74;
    }
    .logo-text {
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 8;
      stroke-miterlimit: 10;
    }
    .logo-text-2 {
      fill: none;
      stroke: #3BB383;
      stroke-width: 9;
      stroke-miterlimit: 10;
    }
  </style>
  <path class="logo-circle" d="M117.8 60.3c.1 31.1-25.1 56.4-56.3 56.5-31.1.1-56.4-25.1-56.5-56.3C4.9 29.4 30.1 4.1 61.3 4c31.1-.1 56.4 25.1 56.5 56.3z" />
  <path class="logo-shadow" d="M117.4 53.6L84.5 20.7l-.8.8c-5.2-5.7-13.3-9.7-22.1-9.7-15.8 0-28.4 12.1-28.4 26.5 0 8.9-.1 17.7 7.3 22.4L39 66.2c.5.5 1 1.1 1.4 1.9 1.9 3.9 7.4 5.5 10.2 8.8 4.3 5 4.5 11.6 4.4 17.8-.1 8.2-11.4 9.1-13.9 2.7-.6-.7-1-1.5-1.2-2.4-1.1 2.4-1.4 5.8-4.2 5.9l14.8 14.9c3.5.7 7.2 1 10.9 1 31.1-.1 56.3-25.4 56.3-56.5.1-2.3-.1-4.5-.3-6.7z"
  />
  <path class="logo-text s" d="M60.6 15.8c-12 0-27.7 10.6-27.7 29.3C32.9 64 52.3 72 55.6 84.5c3 11.3-2 16.3-5 17.3-6 2-12-3-14-6" />
  <path class="logo-text b-front" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
  <path class="logo-text-2 b-front-2" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
  <path class="logo-text b-back" d="M66.6 14.6v92.2" />
</svg>

Also, the graph/circle animations work, but they don't do exactly the same thing as they do in Chrome. In Chrome the circles do a full 360 degrees before coming to their final positions, in Edge they just go from the top to their final position (i.e. only turn 270°, 180° or 90°).

.graph {
  margin: 20px auto;
  transform: rotate(-90deg);
  will-change: transform;
}
.graph-line {
  stroke-dasharray: 628px;
  stroke-dashoffset: -628px;
  transform-origin: center;
}
.graph-25 {
  animation: graph-25 1000ms ease forwards;
}
.graph-50 {
  animation: graph-50 1000ms ease forwards;
}
.graph-75 {
  animation: graph-75 1000ms ease forwards;
}
@keyframes graph-25 {
  0% {
    stroke-dashoffset: 0px;
    transform: rotate(360deg);
  }
  100% {
    stroke-dashoffset: 157px;
    transform: rotate(0deg);
  }
}
@keyframes graph-50 {
  0% {
    stroke-dashoffset: 0px;
    transform: rotate(360deg);
  }
  100% {
    stroke-dashoffset: 314px;
    transform: rotate(0deg);
  }
}
@keyframes graph-75 {
  0% {
    stroke-dashoffset: 0px;
    transform: rotate(360deg);
  }
  100% {
    stroke-dashoffset: 471px;
    transform: rotate(0deg);
  }
}

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">

<div class="large-4 column align">
  <svg width="250" height="250" class="graph photoshop">
    <circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
    <circle class="graph-line ps graph-75" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
  </svg>
</div>
<div class="large-4 column align">
  <svg width="250" height="250" class="graph illustrator">
    <circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#EA954A" />
    <circle class="graph-line ai graph-50" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
  </svg>
</div>
<div class="large- column align">
  <svg width="250" height="250" class="graph sketch">
    <circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#F4D24B" />
    <circle class="graph-line sk graph-25" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
  </svg>
</div>

Anyone know how to fix these issues?

Here's the website: http://seanbaines.com