Plotly modebar buttons malformed

[brjewell]

Hi,

I have a web application where I open a new window using JS,

window.open (myUrl, '_blank');

to display a plotly graph.

When the graph is rendered, the modebar buttons are skewed (the buttons are large and are rendered across the entire page), as if the CSS for the modebar is not being read.

Note that this is happening in Google Chrome, and when I press F12 to display the Chrome developer Tools, and then hit F12 a second time, the modebar buttons are shown correctly.

Since F12 in Google Chrome will redraw the page, the workaround for this issue seems to be to programmatically force a redraw such that the modebar CSS takes over. However, I have not been able to get this to work.

Note that the action of hitting F12 twice will always fix the issue and the modebar buttons are then rendered correctly.

Any ideas of how to get around this problem? I think it is likely related to the fact that I am displaying the plotly graph in a new window.

I should also mention this problem does not occur with FireFox.

I have enclosed a screenshot.

Thank you for your help.

plotly-buttons-screenshot.docx

[etpinard]

Thanks for the report

Here's the screenshot in question:

This may be related to #702

[etpinard]

I wonder if this issue has to something to do with the way we inject style sheets into the DOM using js with Lib.addStyleRule.

[etpinard]

merged with #702