Segments edges rendering issues

[toomuchdesign]

The way some browsers render SVG paths cause a few visual issues especially when when full pies are rendered:

More specifically a few OS/browser combinations seem to not being able to render SVG stroke line caps precisely enough. Here is a list browsers where issues where reported and reproduced.

OS	Browser	Issue
iOS	iOS Safari	full pie charts visual glitch when animate !== true
Windows 10	Firefox v68+	full pie charts visual glitch when animate === true

Somehow SVG stroke-dasharray property is the key here but different browsers react in opposite ways so that I can't currently see an easy patch not involving browser detection.

stroke-dasharray + stroke-dashoffset are currently only appended when animation is enabled.

Partially supported

OS	Browser	Issue
Windows 10	Edge ≤ v44	animation === true breaks visually

Not supported

• IE ≤ 10

Related issues

• Pie Chart parts are losing proportions after animation #112
• Bad display on Edge / Firefox #73

[BBaysinger]

The example image provided gives an idea of one possible abnormality, but it seems like it might not be a deal breaker. I'm not seeing what browser that example is from, or what glitches result in other browsers.

[toomuchdesign]

The visual glitch is the one showed in the picture and it's currently reported in the browsers listed in the table.