This is kind of hard to explain, so I'll start by linking to a my CodePen that demonstrates the issue, and ask you to open it in IE11 to see the issue, and another browser (Chrome, for example) to see expected behavior: https://codepen.io/malcalevak/pen/OmPExK
The gist of it is that I'm trying to draw in an SVG path, and I've set the stroke-dasharray to match the length of the path, and then offset my SVG by that length (in the example, I've shifted it, so you see something happen). I then use Greensock to transition the stroke-dashoffset to 0 (or 250 in the sample). At first, I thought it was just broken in IE11. I even tried manually changing the CSS and inline values to no effect. But then, after shifting the stroke-dashoffset, I saw what was happening. It seems like IE11 takes the original stroke-dashoffset, and creates a permanent, immovable dash! You can shift the dash-array, but it's only visible around that original dash. So in the CodePen, I've got my CSS:
svg.line1 .line-draw {
opacity: 0.17;
fill: none;
stroke: #ababaa;
stroke-width: 6.2px;
stroke-dasharray: 545;
stroke-dashoffset: 500;
}
This bizarre "fixed dash" limits me to only animating between the 500 and 545...which you can see with my second tween:
TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '250', ease: Power0.easeNone});
TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '520', ease: Power0.easeNone, delay: 1});
Initially, you should have the line drawn from 545 to 500, with 1s of animation drawing down to 250, followed by another 1s animation shortening it to 520. This works in Chrome, but in IE11 all I get is a tiny shift, after the delay, of 500 to 520.
And what confounds me is that I couldn't find this documented anywhere!
Can anyone explain what's going on?
I will state that I've got some alternative solutions to do what I need, I'd just like to understand why it's happening, etc!
