'flow' behavior on background tabs

* **C3 version**: 0.4.18
* **D3 version**: 3.5
* **Browser**: Chrome 62
* **OS**: Windows 10

The following snippet is just a test case. It is meant to constantly generate values for a stacked area chart. Each 4s new values are generated and the chart should always 'flow out' 1 element, so that the chart has always two data points showing.

test = c3.generate({
bindto: '#test',
data: {
type: 'area-spline',
groups: [['A','B','C']],
rows: [
['A', 'B', 'C'],
[0, 1, 2],
[3, 4, 5]
],
order: (data1, data2) => -1 * (data1.id < data2.id ? -1 : data1.id > data2.id ? 1 : 0)
}
});
setInterval(() => {
test.flow({
rows: [
['A', 'B', 'C'],
[Math.random() * 100, Math.random() * 100, Math.random() * 100]
],
length: 1,
});
}, 4000);

Things work fine until I go to other tab:

- if I go to other chrome tab, when I return to the original tab all the values generated while I was away show in the chart. It 'accumulates' all the values while I was away instead of 'flowing' them. This just happens if I go to other tab; if I go to other app (like Visual Studio Code) and leave Chrome in the background this does not happen.
- Another thing that happens when I return to the tab is that the legend sort order gets crazy, showing wrong order and wrong colors.