search

cferdinandi / tabby

Lightweight, accessible vanilla JS toggle tabs.
MIT License
602 stars 73 forks source link

Unable to view canvas when switching back to its tab #85

Closed NetOpWibby closed 7 years ago

NetOpWibby commented 7 years ago

I'm using Chart.js to display data and it uses <canvas> to display that data. My charts are in the initial tab of my app but when looking at another tab for a couple minutes, the charts disappear when going back to their tab.

I'd like to prevent this from happening. In my research, it appears that the canvas "forgets" what its dimensions are when the parent container is hidden. Is there some sort of fix I can apply to tabby to make my charts appear as normal?

cferdinandi commented 7 years ago

It's worth mentioning up front: Tabby doesn't actually set the hidden tabs to display: hidden, instead relying on a more accessible clipping technique to visually mask the content while keeping it in the DOM.

This feels like an issue with Chart.js rather than Tabby. Perhaps you can use the callback (details) to reinitialize your chart when the tab is brought back into view?

NetOpWibby commented 7 years ago

Oh I know it doesn't use display to hide, I've used this plugin for years (it's the best of its kind). Still, thanks for the callback idea, that might do the trick.