Segments edges rendering issues
toomuchdesign opened this issue · 2 comments
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
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.
The visual glitch is the one showed in the picture and it's currently reported in the browsers listed in the table.