IE animation issue

[Astyan42]

There is an issue while trying to animate a progress bar under IE. If you use 7 as a strokeWidth, the animation went wrong. strokeWidth = 6 does not reproduce issue here is a fiddle :

http://jsfiddle.net/k11e670p/

[cmeeren]

Nice! I came here to report the exact same thing (I even made a fiddle), but I didn't know 7 was a problematic number. In fact, I see that all the numbers >= 7 that I try reproduces the problem. 6 works.

[kimmobrunfeldt]

Hmm strange. If you know how to fix the issue, please let me know. This sounds like a SVG rendering problem with IE which is potentially hard to fix.

[rossanthony]

Same issue with strokeWidth > 6 in IE11, has anyone found a solution to this by any chance?

[pbellon]

Same issue here on IE8 (and superior).

[kimmobrunfeldt]

I've tried to debug this issue a couple of times with no luck. It might be necessary to file a bug to IE browser.

[danolsavsky]

Bump. My code isn't public yet -Any volunteers to file the bug? https://connect.microsoft.com/IE/content/content.aspx?ContentID=29582

[kubante]

The "solution" to this bug is to create the path with a smaller stroke-width and then adjust the path and viewbox values to blow the svg up again.

once again, shame on ie!

[query-wow]

Changing the stroke value to < 7 works

[kimmobrunfeldt]

I'll report the bug to IE and Edge at some point: here's a minimal reproducible example: http://jsfiddle.net/fdu8zdd7/2/

[DaveData]

What worked for me: animating the strokeWidth to the value I need.

Like in this example: https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

Side effect: if your value is 20%, strokeWidth will also only be animated to 20%. Workaround: Set easing to "linear" and animate strokeWidth to an appropriate bigger value:

var strokeWidth = 12;
options.to.width = (100/value) * strokeWidth;

[eliot-akira]

Thanks @DaveData for a workaround example. Here's what worked for me:

var value = 0.2 // 0.0~1.0

// IE/Edge compatibility mode

if ((shape==='Circle' || shape==='SemiCircle') && options.strokeWidth >= 7) {

  // Start with stroke width 1 and animate up to value
  options.from.width = 1

  // Adjust stroke width to have same final value regardless of progress
  options.to.width = options.strokeWidth * (1 / value)

  // Linear easing to target right value above
  options.easing = 'linear'
}

[CharbelIlias]

this does not work at all for me! I have strokewidth at 4 and it dosent matter if I change it upwards or downwards, it does not render at all. Have the lastest master. Dont know what the problem is..

[gillohner]

Not working for me in IE11. My stroke width is set to 6 but my bar isn't rendered at all in IE11. It seems like it has a problem with this:

            step: (state, bar) => {
                bar.path.setAttribute('stroke', state.color);
                var value = Math.round(bar.value() * 100) + "%";
                if (value === 0) {
                    bar.setText('');
                } else {
                    bar.setText(value);
                }

                bar.text.style.color = state.color;
            }