Lines and bars with duration set to zero fail to render in Safari

[tbuteler]

It seems that setting the duration of a component (e.g. VisLine or VisStackedBar) in Vue will make it fail to render in Safari. The strangest thing is that I cannot reproduce it when looking at this example, but I can definitely see it on the majority of refreshes on a forked Stackblitz of that same example.

I wonder if there is a better way to disable animations without having to set duration = 0?

Note that anything that forces the graph as a whole or an individual series to re-render will fix the issue (e.g. highlighting a line on hover, or changing the fallback value by clicking on the legend in the example above). So if there is a way to force the re-render of all the graph's series after it's been loaded, it might also do the trick, but this might be trickier depending on the setup of props/computed values, etc.

No version of Chrome or Firefox I tested the above with had any issues whatsoever, so it seems Safari is the outlier here.

Also, this does not affect the VisDonut component, because the animations for those are different (it uses CSS transition, as far as I can tell, so animations can be disabled globally via CSS, too).

[lee00678]

@tbuteler thanks for bringing this up. Our example on the website only renders in React, that's probably why you can't reproduce it.

I'm able to reproduce this issue as well, so we will take a look.

As of a better way to disable animations, I don't think so. Will setting the duration to a really small number work for you? Something like: duration=1

[tbuteler]

@lee00678 thanks for looking into it! I'm afraid I tried duration=1 before opening the issue, and Safari glitches with that value, too, as far as I can tell...

[rokotyan]

@lee00678 @tbuteler I've seen this issue before in Safari (using React) and tried to debug it with no luck. I was hoping that it's an issue of Safari itself and that they'll fix it, but it has been more than a year already, so probably not.

The weird thing is that if you do Inspect Element and look at the corresponding DOM elements — they are correct.

I think it can be related to transitions somehow. When we pass 0 to duration, we don't initiate transitions and the chart renders properly in that case.

[tbuteler]

@rokotyan sorry to hear it's given you trouble before... seeing as it seems to be an isolated issue with Vue, however, maybe it's a kink on the specific logic for that framework? I just experimented quickly on a local environment, and switching the mounted hook to use setTimeout instead of nextTick to start things off seems to fix the issue, e.g. here: https://github.com/f5/unovis/blob/main/packages/vue/autogen/component.ts#L47

Not sure if there are any side-effects from doing that change, but maybe it helps with the debugging a little?