C3: v0.6.11 introduced vertical chart growth every time the window loses and regains focus

[rage311]

• C3 version: 0.6.11, 0.6.12
• D3 version: 5.7.0
• Browser: Firefox 64.0.2 and Chromium 71.0.3578.98
• OS: Arch Linux 4.20

Timeseries line charts seemed to work fine with c3 v0.6.10 and lower. Once I changed to using v0.6.11 or v0.6.12 (latest at time of writing), the chart's height grows every time the browser/page loses and regains focus.

Here's the most minimal version of a chart that does it: https://codepen.io/anon/pen/JxjdXX

When it loads, click the white rendered HTML area that contains the chart, then click back to the JS, then back to the rendered area, and so on, and so on. Each time the focus is back on the area with the chart, the chart grows vertically.

This seems to be the likely culprit: https://github.com/c3js/c3/pull/2541

Please let me know if I can provide any further information.

[tylervick]

Definitely a breaking issue here - I can't use this library while this bug exists

[Climax777]

Happens to me as well. Additionally, our pie charts have initial 0 height, and applying the focus/blur approach above, the chart's height increases.

[Climax777]

Happens to me as well. Additionally, our pie charts have initial 0 height, and applying the focus/blur approach above, the chart's height increases.

https://codepen.io/rompelstompel/pen/EMPmoV

You can edit settings to change to 0.6.10 to see how it used to react: https://codepen.io/rompelstompel/pen/Qoygje

[kt3k]

Found a workaround. If you set svg's display property to block, then it seems fixing the issue.
https://codepen.io/kt3k/pen/OqXxoj

(I'm not sure the root cause of this behavior. Sometimes svg and its wrapper div have different sizes. And that cause this bug. But in some cases (for example this one in /htdocs) it doesn't simply happen (in that case, svg and its wrapper div have the same height.)

[kt3k]

After looking at #2541's example carefully, I found that it doesn't work without additional styles like #chart { height: 100%; }. Now I think it's better to revert it.

[kt3k]

Reverted #2541 and released it as v0.6.13.

[Climax777]

Reverted #2541 and released it as v0.6.13.

Thanks!

[kt3k]

The codepen example seems fixed with c3 updated to v0.6.13.
https://codepen.io/kt3k/pen/zboOKj