toomuchdesign/react-minimal-pie-chart

Slices disappearing in Safari

clif-os opened this issue · 10 comments

clif-os commented

Do you want to request a feature or report a bug?

Reporting a bug.

What is the current behaviour?

Slices disappear on package v6.0.1 | Safari Version 13.0.5 (14608.5.12)

Rolled back to package v5.0.2 and the issue is gone.

Steps to Reproduce the Problem

<PieChart animate animationDuration={500} animationEasing="ease-out" data={data} />

Kapture 2020-03-09 at 13 45 57

toomuchdesign commented

Hi @ChiefKleef,
Thanks for reporting. I unfortunately couldn't reproduce the issue on my machine.
Could you please try to replicate it outside of your application?
Cheers!

oscarychen commented

ezgif-3-12577e9311a7

I have this issue happening as well, and it doesn't always happen, just sometimes and depending on the composition of the slice sizes it seems. It only happens in Safari and not in Chrome or Firefox.

toomuchdesign commented

Hi @airoscar! Thanks for the input. Couple of questions:

  1. Would you be able to paste here the code that generated "month 3" chart (including data prop) or provide a runnable repro?
  2. Does the issue occur with animation disabled, too?
oscarychen commented

Hi,

I tried to put this in a codesandbox, but codesandbox is throwing some weird import error which I don't get on my local machine. Here is the code anyway:
https://codesandbox.io/s/dreamy-germain-0zyuu?file=/src/CompletionPieChart.js

The "month 3" chart is populated using the same component as every other pie chart here.

In order to get animation working: I had to set the data for every pie slice to a default data template with all number = 1, and then when the API returns actual data, I would let the pie chart to switch to track the actual data with actual numbers. I'm also using the reveal prop. Not sure if this is what might be causing the issue.

toomuchdesign commented

Good!
Here a the repros with versions:

The bug seems to happen on Safari only and related with unexpected side effects between specific values of data[].value, animate radius and viewBoxSize props.

Version 8.0.0 seems unaffected or at least not affected by this specific values combinations.

@airoscar would you mind trying to update react-minimal-pie-chart to v8? There are quite a few breaking changes but your code will probably benefit from it.

oscarychen commented

Thank you, ill update to 8.0

RuiRocha1991 commented

Hi, team react-minimal-pie-chart,

I am using your plugin and I found a small error, whenever there is a value in the chart in the range [71, 74]% at the end of the animation that line disappears. I have version 8.0.0, as you can see in the following link [https://github.com/RuiRocha1991/portfolio/tree/master/src/components/skills](Pie chart)

toomuchdesign commented

Hi @RuiRocha1991,
the issue seems to be originated by 2 overlapping problems:

  • the way values get rounded at stroke-dashoffset attribute evaluation (we get an infinitely small negative number instead of 0)
  • the way browsers interpret such a infinitely small negative number (I understand Chrome treats is as 0 while Safari considers it still a negative value)

I still have to make my mind about how to deal with rounding issues in JS mathematical operations. They cause issues affecting both code and tests.

toomuchdesign commented

Opening a work in progress PR: #170.

toomuchdesign commented

Should be fixed from v8.0.1. 🥳
Feel free to reopen/comment if necessary.