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.

[alexandergerber]

We tested this and it seems not to work for our plots. It seems that the problem only occurs in the lower part of the plot and also only at specific pixels.

[magdyamr542]

unfortunately we also have the same problem. the unhover event gets fired even if the mouse is on the box or the bar.
that causes the tooltip to disappear of course and even if we used a custom tooltip we still depend on the unhover event fired from plotly to know when to hide the tooltip.

I have added here some screenshots from the code and hopefully someone can help fix this issue soon.

the Tooltip disappears back and forth because of the unhover event.

the function where we listen to the unhover event from plotly

the function where we fetch the html div element from the shadow root

[archmoj]

We tested this and it seems not to work for our plots. It seems that the problem only occurs in the lower part of the plot and also only at specific pixels.

It seems working on this codepen.
How did you test it?
Please provide a minimal codepen illustrating the problem.

[magdyamr542]

it does not work as expected in the codepin that you sent me either. the tooltip disappears frequently even if iam still on the bar.

this codepen prints in console the unhover events. you can see that the unhover event gets fired over and over again with the mouse being on the bars.

i hope this could help.

[alexandergerber]

Ich also checked out the codepen example. I found the problem there as well.

It also seems worse in the bottom part of the graph.

[archmoj]

Fixed by #5256.