Plotly.js: Ploty.js in Shadow DOM hover flicker

[dbluhm]

When Plotly.js is rendered inside of a ShadowDOM, the hover elements rapidly draw, clear, and redraw causing a flickering effect on mousemove events under specific conditions.

Demonstration in codepen

And a GIF

For comparision, here is the same example as above using the Light DOM:
Demonstration in codepen

And a GIF

When it comes to support for Plotly.js in Shadow DOM, there are other issues in addition to this one but, as demonstrated in the first code pen, there are workable fixes I can make as a user in most cases (i.e. the styling inside of the template...) but this particular issue is not so easily worked around as a user.

[alexandergerber]

I am having the same issue. After some digging the problem could be tracked down to all plots which are using a rect with
class="nsewdrag drag" for the tooltips. This includes all plots using a cartesian coordinate system.

Other plots like Sankey diagrams are not affected.

The difference we found was that for the plot where the problems exist the tooltips are not triggered by hovering over the visible objects directly (underlined in blue) but by the extra layer mentioned above (underlined in red).

In other types of plots where the tooltip does not rely on that additional layer there is no problem.

As far as I understand the mouseposition within the rect is compared to that of the graphical elements in the plot. If there is a match the tooltip is shown.

I would like to help fixing that issue. Is there any idea what could be causing it?

[dbluhm]

@alexandergerber to clarify, this is occurring within a ShadowDOM element and the behavior is not exhibited in normal "LightDOM" elements?

[alexandergerber]

@dbluhm Yes. I am trying to use plotly within a Web Component. Outside ShadowDOM elements it works correctly.

[dbluhm]

@alexandergerber does the codepen I shared also encapsulate your findings? If not, would you be able to provide one that does? I think that would help ensure we're looking at the same issue. It might also be interesting to try out changes from the (incomplete) PR I have open addressing this issue and seeing if that fixes the behavior you're seeing on the other graphs

[alexandergerber]

I would say it is exactly the same issue. I checked out your pull request and can try if it fixes the problem for me.
When I have tested your changes I'll report my findings.