IE / Edge SVG loading/rendering issue

592
December 26, 2016, at 00:57 AM

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

READ ALSO
How to give space between horizontal divs?

How to give space between horizontal divs?

I have tried giving margin for div but the one div box goes to next lineHow to solve that?

321
How to set html table&#39;s width property in ASP.Net MVC5

How to set html table's width property in ASP.Net MVC5

I am trying to add scrollbar to my html table and then change the width of the table columns to my liking but table's column width is not getting affectedHere is my table html

331
Is there a tool matching class name to styles automatically?

Is there a tool matching class name to styles automatically?

Is there a tool matching class name to styles automatically?

318
plot.ly pie chart responsive layout - too much whitespace

plot.ly pie chart responsive layout - too much whitespace

I have a problem with my responsive plotly designI took the code from here and it is working as desired

619