Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v0.6.11 introduced vertical chart growth every time the window loses and regains focus #2567

Closed
rage311 opened this Issue Jan 21, 2019 · 8 comments

Comments

Projects
None yet
4 participants
@rage311
Copy link

rage311 commented Jan 21, 2019

  • 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: #2541

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

@kt3k kt3k added the 🐛 bug label Jan 24, 2019

@tylervick

This comment has been minimized.

Copy link

tylervick commented Feb 21, 2019

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

@Climax777

This comment has been minimized.

Copy link

Climax777 commented Mar 1, 2019

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

This comment has been minimized.

Copy link

Climax777 commented Mar 1, 2019

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

This comment has been minimized.

Copy link
Member

kt3k commented Mar 4, 2019

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

This comment has been minimized.

Copy link
Member

kt3k commented Mar 4, 2019

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

This comment has been minimized.

Copy link
Member

kt3k commented Mar 4, 2019

Reverted #2541 and released it as v0.6.13.

@Climax777

This comment has been minimized.

Copy link

Climax777 commented Mar 4, 2019

Reverted #2541 and released it as v0.6.13.

Thanks!

@kt3k

This comment has been minimized.

Copy link
Member

kt3k commented Mar 5, 2019

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

@kt3k kt3k closed this Mar 5, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.