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

Activity

1. chriddyp

   added

   bugsomething brokensomething broken

   on Jul 21, 2017
2. rreusser commented on Jul 21, 2017

   

   rreusser

   on Jul 21, 2017

   Last edited by rreusser

   Contributor

   More actions

   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. 😞
3. rreusser commented on Jul 21, 2017

   

   rreusser

   on Jul 21, 2017

   Last edited by rreusser

   Contributor

   More actions

   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.

   
4. alexcjohnson commented on Jul 21, 2017

   

   alexcjohnson

   on Jul 21, 2017

   Collaborator

   More actions

   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.
5. rreusser commented on Jul 21, 2017

   

   rreusser

   on Jul 21, 2017

   Contributor

   More actions

   I also tried page-break-inside: avoid and -webkit variants but didn't have luck. Maybe I used them incorrectly.
6. zmays commented on Jun 25, 2019

   

   zmays

   on Jun 25, 2019

   More actions

   Any known workarounds for this issue?
7. lacerdamarcelo commented on Jul 16, 2020

   

   lacerdamarcelo

   on Jul 16, 2020

   More actions

   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.
8. gvwilson commented on Jun 10, 2024

   

   gvwilson

   on Jun 10, 2024

   Contributor

   More actions

   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
9. gvwilson

   closed this as completedon Jun 10, 2024