working on firefox but not on chrome & safari

Community Help
1

Hi All…

I’ve got an interactive graphic built in this notebook.

The graphic is functioning as I expect in Firefox, but not in Chrome and not in Safari.

The expected behavior is that when one clicks on one of Nevada’s congressional districts in the map, the district should turn blue and a diagram should appear above the map, like this:

image
image1912×854 22.7 KB

In Chrome and Safari, however, the name of the district appears, but not the diagram. So in chrome, it looks like this:

image
image1878×682 9.69 KB

The console in chrome developer tools isn’t showing any errors or warnings, so I’m not sure how to get started debugging this. Presumably, I’m using something in the code for the diagram that is unsupported in Chrome/Safari.

FWIW, the cell in the notebook that returns the diagram that is supposed to appear on click but does not on chrome/safari is the one in which a function is defined called spatialDetails.

Anybody see anything in the code that is obviously a chrome/safari unsupported feature?

Thanks!

-Stu

2

Giving your info-diagram div a width of 100% should fix it:

<div class="info-diagram" style="width:100%">

As for debugging, I started by disabling display:flex. It also helps to drag elements up through their parents until they appear.

Since the behavior you observed is different across browsers, you may have some luck finding more details about this bug here: