Plotly.js zoom and toolbar not working properly in IE10

plotly.js
1

Hi,

I’ve developed some graphs using plotly.js that are working fine in Chrome, mobile devices, and IE11, however zooming doesn’t work properly for any of the graphs in IE10. When trying to zoom, it’s like the mouse cursor gets stuck and won’t finish the zoom. I’ve just noticed that the graphs are also missing the plotly toolbar in IE10.

I can disable zoom for IE10, but I feel like it would be a shame, as that’s what most of my colleagues are using (and can’t upgrade until our organisation is ready to).

Has anybody else had this issue, or have any ideas?

Thanks
Nathan

2

I had ran into the same issue. And after several days investigation, I found the root cause is when you are zooming, Plotly will generate a transparent div(fixed-positioned with .dragcover css class) to cover the whole page. However in IE10(I think it’s the same for earlier IE too), mouse events are not triggered on this fixed-positioned as expected.
You can try to apply a css trick as below to fix it:
.dragcover{
background-image: url(’ ') !important;
}
For more information, you could refer to http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/

1 Like
3

Henry, you’re my hero! Such an easy but fantastic fix. Thanks :slight_smile:
Out of curiosity, did you have the same issue with the Plotly toolbar not coming up on the graphs in IE10, as it usually does in the top right?

4

I haven’t encountered this toolbar issue in IE10 for now, and it always in the top right.:slight_smile:

5

That same layer is what prevents the mousemove event from being launched while dragging, you will have a hack to fix that problem