Mouse position wrong after dropdown selection

Hi!

I have an issue in a dash app that I am unable to debug on my own.

The app has a number of dropdowns that control the data for some graphics. as long as I stay at the top of the page, everything works fine, but when I scroll down a bit and make a dropdown selection, it appears that the cursor position is “reset”, while the underlying website is still scrolled down.

Here’s a screenshot to demonstrate what I mean (the crosshairs should be on top of the bar where the hoverlabels are shown):
grafik

I can “re-calibrate” the cursor by scrolling all the way up and then down again, but that’s not exactly user-friendly and I’d hate to tell my clients that they have to do this to make my app work.

I think that this is not related to the CSS transform-bug mentioned elsewhere (e.g. here: https://github.com/plotly/plotly.js/issues/888), since the cursor position is just fine in the beginning and I can’t find any relevant transforms in my CSS.

Small edit: It appears to be a Firefox-specific problem. Chrome and Edge don’t show this beahavior.

That’s a tricky one, but we’d really like to get to the bottom of it - do you have an example of a self-contained app that does this? My gut reaction is it’s probably a problem in plotly.js, but I haven’t been able to reproduce in a codepen. One attempt: https://codepen.io/alexcjohnson/pen/NMdMbE?editors=1010 - if I’m understanding you correctly, loading that page in FF, scrolling down, and clicking “Redraw” should be enough to trigger the bug?

I have this running in a larger multi-page app, but I will try to extract some test scenario and get back to you. Thanks!

Edit: I’ve temporarily fixed this with with some javascript that scrolls 1 pixel up and down after a dropdown selection. I used @jimmybow’s visdcc.Run_js for this, but I’m worried that allowing Javascript execution like this might open up some security loopholes that I’m not aware of. I know next to nothing about javascript, so maybe someone can comment on whether my concerns are even valid.

OK, so I’ve tried to create some minimal examples, but they just don’t reproduce this behavior. Would it help you if I PM’d you a link to a hosted online version of the app, or do you need to see the Python source?

Sure, I can take a look at a hosted version, may or may not be enough to tell what’s going on.

visdcc.Run_js is interesting - hacky, not the way you want to solve this, but AFAICT it’s OK from a security standpoint.