Plotly.js: scrollZoom no longer works when page is scrollable

Created on 15 Feb 2018 · 9Comments · Source: plotly/plotly.js

Originally posted https://community.plot.ly/t/scrollzoom-doesnt-work-in-chrome/7356/5

Example: http://marfoldi.web.elte.hu/plotly.html

Possible culprit: https://github.com/plotly/plotly.js/pull/2296

bug

Source

etpinard

👍2

Most helpful comment

@etpinard I will devote this issue time tomorrow.

dy on 12 Jul 2018

❤1 👍1

All 9 comments

I can't reproduce this on any of my browsers (mac OS 10.13, latest Chrome, FF, Safari) - The OP seems to be on Windows, but I guess you see it on Ubuntu as well @etpinard ?

alexcjohnson on 6 Mar 2018

Yep. I can reproduce on my Ubuntu machine fine. @dfcreative can you double check on Windows?

etpinard on 6 Mar 2018

@etpinard only the last plot is working, but all three of them should work, that is what I see. Confirm the bug.

dy on 6 Mar 2018

In the example linked to in the opening post, none of the plots work for me, neither in Chrome nor Firefox.

A couple of observations (Windows):

in the example linked to in the opening post, if I 1) open the developer tools or some other window that hides part of the right-hand side of the plots and then 2) refresh the page so that the plots are drawn less wide and then close window, all the plots are now working for me (both in Chrome and Firefox, but the window that was opened has to be closed first).
a div with styling appears to give a working plot for me:

<body>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot_0" style="width:110vw;height:100%"></div>
<div id="plot_1"></div>
<div id="plot_2" style="width:70vw"></div>
</body>
<script>
    Plotly.newPlot('plot_0', [{x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16]}], {title: 'has style, can scroll'}, {scrollZoom: true});
    Plotly.newPlot('plot_1', [{x: [1, 2, 3, 4, 5], y: [16, 8, 4, 2, 1]}], {title: 'has no style, cannot scroll'}, {scrollZoom: true});
    Plotly.newPlot('plot_2', [{x: [1, 2, 3, 4, 5], y: [10, 1, 10, 1, 10]}], {title: 'has style, can scroll'}, {scrollZoom: true});
</script>

(for some reason, all plots are scrollable on CodePen with this code)