Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Graphs sometimes remain hidden when going from `display:none` to `display:block` in CSS
See original GitHub issueI’ve been having a problem (and it appears I’m not the only one) when hiding and revealing Chart.js graphs using CSS (display:none and display:block). I’ve tried triggering the jquery resize event on the window, as well as calling the resize() and render() methods on the chart objects. None of these fixes the problem.
Issue Analytics
- State:
- Created 8 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Animating from "display: block" to "display: none"
When the element is invisible, first make it display: block , then (while it's still visually hidden, but existing on the page), animate...
Read more >Does 'display:none' improve or worsen performance?
So yes, a "display: none" property applied to a nonzero dimensional and free flow or relatively positioned element, will be a costly operation ......
Read more >CSS 'display: none' causes problems for screenreaders
The issue is that using CSS 'display:none', will actually hide the content contained in the <div> that the declaration is attached to from...
Read more >CSS display:none and visibility:hidden – What's the Difference?
display :none turns off the layout of the elements, so they are not rendered; visibility:hidden hides the elements without changing their layouts ...
Read more >8 Proper Ways to Hide Elements on Your Website With CSS ...
Another method is to use the visibility: hidden; . It works similarly to display: none; but instead of actually removing the element it...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Another hacky fix that worked for me for the display none to block issue… Instead of display: none put visibility: hidden and set height and width of container to 0.
closing as duplicate of #762