js-plotly-tester causing other elements to vanish (Chrome)

[benjeffery]

Some unrelated elements are hidden when a plot is created in Chrome.
I've tried to make as minimal test case as possible: https://jsfiddle.net/r5uzc7rd/3/
In the fiddle after 2 seconds js-plotly-tester is removed from the DOM and an element becomes visible.
This element is only hidden when using Chrome (I'm on version 50).
A possible workaround is to put z-index:1 on js-plotly-tester but I don't know if that has other consequences. I think #393 may be related.

[etpinard]

Thanks for bringing this up and 🍻 for that very nice reproducible example.

After a quick look on browerstack, this issue seems to be apparent only in Chrome 49 and up.

It is not obvious to me what Chrome dislikes about our svg tester node.

[benjeffery]

It is certainly a strange one - if you remove the "transform3d" style on the sibling div, OR remove the "absolute-overlay" div OR remove the z-index on the hidden element then the element is not hidden!

[mdtusz]

I'm not 100% convinced this is a plotly.js bug. @benjeffery if you encounter more strangeness with this, please let us know so if it is on our end, we can solve it.

[benjeffery]

Yes, this is not the fault of plotly - this is clearly a browser bug. However plotly could help by including a workaround, such as the z-index on the tester SGV. I'm happy to make a PR for that.

I'm trying to pin down the exact bug to submit a browser issue, but the behaviour is hard to pin down.

[jec99]

I am also experiencing this bug. I'm using Angular Material and if a header is designated as <md-toolbar> it is hidden by Plotly, but if it is written as a <div> it is not. It also interferes with the <md-sidenav> directive. It is not an issue of interference because it does not occur in Firefox. The bug does not occur if the element is set to display: table-group-header;, display: table-row, or a few others, but it does occur with all common display settings.

Edited. Everything is working fine in the latest Chromium snapshot corresponding to the current version of Chrome, which can be found here

[benjeffery]

As suggested in the contributing guide, I have made a PR against my fork. Could this be reviewed? I'll then make a PR against this repo. Thanks!

[etpinard]

@benjeffery your fix comes at a good time. Looks like this issue is happening on FF47 too.

[etpinard]

My mistake. Everything is fine in FF47. I misunderstood what the jsFiddle ⏫ was trying to show.

Even better news: looks like this bug is in fact fixed in Chrome 51.