Bad display on Edge / Firefox
slumbering opened this issue · 6 comments
When the Pie is animated, the drawing part is not properly display on Firefox and Edge.
Specifications
- Version: 5.0.0
- Platforms: Firefox Quantum 68.0.2/Microsoft Edge 44.17763.1.0
- Subsystem: Windows 10
Hi @slumbering , thank for reporting.
Can you confirm that there is no issue when animation is disabled?
I confirm that when animation is not enable the pie is correctly displayed. Thanks
I still haven't had the possibility to test on Windows, but the only solution I see is to cleanup the properties responsible for the animation when this is completed. Which is maybe a good idea no matter the bug.
Here is the PR. Feel free to try it out and let me know.
Cheers!
I can reproduce the issue on Windows 10/Edge but it doesn't seem to be related with animation (even though the animation blows up the visualisation).
I couldn't reproduce on Widows 10/Firefox 68, instead.
For Edge I don't see any possible fix: the browser doesn't accurately render svg path strokes nor stroke-dasharray style prop which are the foundation of react-minimal-pie-chart render strategy.
I could reproduce on iOS Safari (13.3.1), but only with animation = false. The stroke-dasharray/offset appended for animation seem to fix the render issue for this browser.
Update 15/02
It seems that Safari has some CVG rendering issue when stroke-dasharray = none. Setting it to any value (eg. actual segment length) fixes the issue. 😕
Merged into #129