9

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>
ndimatteo
  • 498
  • 5
  • 22
  • on a technical note, don't waste time on IE9 and IE10 - Microsoft discontinued them on January 12th of this year, except for Vista SP2 users who can only use IE9 and might still be covered under MS's extended support; but only if they're a business, not regular people at home (and I'm fairly sure you're not targeting businesses here). The new MS policy is "we only support the most recent release of IE" so that's IE11, and once Edge lands, IE11 will go out of support, too. – Mike 'Pomax' Kamermans Apr 28 '16 at 17:25
  • Thanks Mike, I totally agree. I'm not super concerned with IE10, however in both IE11 and the latest versions of Edge seem to have the issue as well, so I think it's worth addressing, as it's likely going to be a continued bug in whatever the latest crappy browser Microsoft releases, haha. – ndimatteo Apr 28 '16 at 17:45
  • mind you, if it IS a bug, MS has undergone quite a change since Ballmer got kicked out, so you can actually file it on their *public issue tracker* over on https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ these days (which is awesome) – Mike 'Pomax' Kamermans Apr 28 '16 at 18:01

1 Answers1

5

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.

imbearr
  • 999
  • 7
  • 22
  • Thanks! This actually seems to work pretty well, except on the latest version of Edge (Edge 13). Seems odd, since the older version of Edge and IE10-11 all are working. Any idea why it's still cropped in Edge 13? – ndimatteo Apr 28 '16 at 17:54
  • I have no any idea... Exist few [bug reports](https://connect.microsoft.com/IE/Feedback/Details/1571965) about microsoft's browsers and svg rendering, but with new updates we got new bugs from this furious company. Trick with version and style I have got from svg created by CorelDraw (as good approach). In global all attemps to fix this process is magic and hoodoo. – imbearr Apr 28 '16 at 18:12
  • Actually, just tested with it in project and it works in Edge 13 now, must have to do with the meta tag you mentioned! This is perfect, thanks so much for this! – ndimatteo Apr 28 '16 at 18:21
  • Once it lets me award the bounty, it's yours! – ndimatteo Apr 28 '16 at 18:22