Black Lives Matter. Please consider donating to Black Girls Code today.

Graphs showing solid red after show/hide

I’m using Plotly javascript to create a number of graphs in the browser. Each graph contains three scattergl subgraphs, and I show one “group” of graphs at a time by hiding/showing the respective DIV’s in response to user input.

In chrome this works fine, and I can flip back and forth between the various graphs without difficulty. In Safari on Mac OS X, however, the second time I show a graph div I get a solid red background with the labels drawn, but no graphs. No errors are shown in the console when this happens. If I switch back and forth a couple more times eventually the graph will draw correctly, before going back to the red background on the next switch.

Can anyone shed some light on what is happening here, how to solve it, or at least how to programmatically check to see if it has occurred? Thanks.

Thanks for using Plotly.js!
Would you please share a minimal codepen to reproduce the bug?

Well, it’s not a codepen, but the basic steps are:

  1. create one or two scattergl plots in separate divs (in my case I have two and they contain several thousand data points, I don’t know if that is necessary)
  2. repeatedly hide/show said divs (for example, with jQuery ('#div_one').hide(); (’#div_one’).show(); )

Note that this behavior is only exhibited (in my experience) in Safari on a Mac, other browsers do not have issues. Also note that I have managed to work around this problem by calling Plotly.relayout() after a brief delay (setTimeout)

I can work up a codepen in a bit.

Yes please! Having a codepen could save us some time debugging while testing with different browsers.