Weird hover issue when drawing multiple graphs in a parent div with column-count: 2

[chriddyp]

https://codepen.io/chriddyp/pen/aweQae

Originally posted plotly/dash#86

[rreusser]

One small note: I think it's best to avoid <div/><div/>, which, contrary to what probably everyone ever would expect, gets parsed as <div><div></div></div> since self-closing void tags ignore / anyway so that it appears self-closing tags are supported, but only when using them on void tags.

In other words, one of your plots is actually inside the other, though fixing that doesn't fix the weird behavior.

Otherwise I wasn't immediately able to succeed in figuring out which magic css flag fixes the behavior. 😞

[rreusser]

Whoaa… check out three columns… that might at least hint at how this is implemented. Perhaps it rasterizes and then splits it into columns as a rendering effect? I wouldn't at all be surprised if there were browser bugginess for how this interacts with relative/absolute positioning, mouse coords (which, surprisingly, seem to work), SVG, etc.

[alexcjohnson]

We can at least apply break-inside: avoid and its vendor variants to gd to prevent chopping the svg as in @rreusser 's second comment.

What this shows though is that the browser is doing something strange with getBoundingClientRect after the first column - see eg this ancient bug webkit seems to have ignored. I don't see where So I suspect that the complete fix is going to require getting rid of all invocations of getBoundingClientRect on elements inside gd and only using the off-screen tester - which is also needed for #888 and probably some un-reported issues around plotting certain trace types in hidden <div>s.

Also notice that the modebar jumps down below the plot momentarily when you mouse over from one plot to the next... not sure why that would happen as it's absolutely positioned wrt its parent... but might be related to all this.

[rreusser]

I also tried page-break-inside: avoid and -webkit variants but didn't have luck. Maybe I used them incorrectly.

[zmays]

Any known workarounds for this issue?

[lacerdamarcelo]

I managed to "solve" this problem by manually editing the style of the div. You can see how it is done here.

This is the code I used:

app.layout = html.Div(children=[
    html.H1(
        children='Painel de Rating da Dívida Ativa',
        style={
            'textAlign': 'center',
        }
    ),
    
    html.Div(children=[
    dcc.Graph(
        id='example-graph',
        figure=fig
    )], style={'width': '50%', 'float': 'left'}),

    html.Div(children=[
    dcc.Graph(
        id='example-graph-2',
        figure=fig2
    )], style={'marginLeft': '50%'}),

    generate_table(df_data)
])

In this example, fig and fig2 will be put side by side and the hover text in fig2 will succesfully appear.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson