Chart does not render properly when it was generated in not active tab in chrome

[norecces]

I opened http://c3js.org/samples/chart_combination.html from http://c3js.org/examples.html by clicking at link and opening it in new tab. Then I waited few seconds and went to combination example. It was not rendered (Actually it was but wrong).
To get chart visible I had to resize window. If it is only one tab in chrome, this bug does not seem to appear.

Google Chrome 39.0.2171.99 m

[tw3]

I saw the same bug in Chrome when rendering bar charts. I was able to fix this by changing this line in c3.js:

$$.redrawBar(drawBar, false), // changed from true to false to fix bug (line 626)

[norecces]

Hi, tw3

As I understand with this change in code you will loose smooth transitions.

Compare transition behaviour in http://c3js.org/samples/chart_bar_stacked.html and http://jsfiddle.net/norecces/sq5Lq7br/1/

[aendra-rininsland]

Marking this as a bug. #774 might allow @tw3's fix to be added to core while still enabling transitions.

[aendra-rininsland]

I've noticed this quite a lot recently working with C3, seems like if a chart is rendered and not painted, it will paint only upon being told to resize or flush or whatever. According to #936, charts also fail to render properly if they're not visible and are then made as such.

[aendra-rininsland]

See this SO answer. It's a broader problem with D3, due to requestAnimationFrame.

IMO, the answer is 100% to drop all D3 transition() calls altogether in favour of CSS transitions/animations. See #774. Another solution would be to call a redraw when the visibilitychange event fires; see: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

[fmluizao]

I'm facing this problem with version 0.6.7. Its happening with examples too.

To reproduce, open an example chart in a new tab with Chrome. Wait a few seconds and switch to the new tab, the chart isn't rendered correctly.

Chrome version: 69.0.3497.81 (linux)

[fmluizao]

Seems like its already reported:

#2458