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

[BUG] Charts are not displayed when nested under <details> (in Firefox) #5158

Open
JAT86 opened this Issue Jan 18, 2018 · 7 comments

Comments

Projects
None yet
6 participants
@JAT86

JAT86 commented Jan 18, 2018

[BUG] Charts are not displayed when nested under <details> tags (in Firefox).

Current Behavior

When nesting the chart in <details>, the chart does not display. This bug appears to happen only in Firefox. In Chrome and Opera, the chart is displayed.

Steps to Reproduce (for bugs)

CodePen demo: https://codepen.io/JAT86/pen/mpQvmJ

Environment

  • Chart.js version: Version: 2.7.1
  • Browser name and version: Firefox Quantum, version 57.0.4 (64-bit)
@jcopperfield

This comment has been minimized.

Contributor

jcopperfield commented Jan 19, 2018

@JAT86 It seems to be related with the responsive-option. Setting this option to responsive: false will show the chart in Firefox as well. Also embedding the chart directly under the details-tag instead of inside the <div class="myChartDiv"> container will show the chart.

@simonbrunel

This comment has been minimized.

Member

simonbrunel commented Jan 19, 2018

It might be a bug with Firefox that doesn't correctly trigger animations for elements nested under details, so we can't detect when the canvas become visible.

@MPierre9

This comment has been minimized.

Contributor

MPierre9 commented Mar 20, 2018

Is it ok if I take a look at fixing this? When I test with other canvas tags under details they seem to show in firefox. I'm curious if it's chart.js or just firefox that has this issue.

@etimberg

This comment has been minimized.

Member

etimberg commented Mar 20, 2018

@MPierre9 go for it

@MPierre9

This comment has been minimized.

Contributor

MPierre9 commented Mar 22, 2018

@etimberg What do you think about implementing a MutationObserver in platform.dom.js instead of our current method of using David Walsh's method with CSS animations. I think this could correct the issue with Firefox and provide better DOM node detection.

@etimberg

This comment has been minimized.

Member

etimberg commented Mar 22, 2018

It unfortunately doesn't detect when the parent node resizes

@simonbrunel

This comment has been minimized.

Member

simonbrunel commented Mar 22, 2018

@MPierre9 We already investigated MutationObserver and concluded that it doesn't fit all use cases. The current implementation took a lot of time to stabilize and I feel it works great now except in some very particular cases such as this <details> tag in a single browser (which may actually be a Firefox bug). So I'm not sure it's worth it to rewrite again the visibility/size detection logic, which will certainly introduce new bugs more problematic than this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment