plot "Zoom" and "pan" buttons malfunction when plot in pop-up window when clicking on "draglayer" div container

[ifll]

My example is based in this codepen I have made: http://codepen.io/anon/pen/RKBORZ

To introduce this codepen I have to say that it includes:

• JQuery
• Featherlight: https://github.com/noelboss/featherlight/#installation
  • Css: //cdn.rawgit.com/noelboss/featherlight/1.7.0/release/featherlight.min.css
  • Js: //cdn.rawgit.com/noelboss/featherlight/1.7.0/release/featherlight.min.js
• Plotly javascript: https://cdn.plot.ly/plotly-latest.min.js

OVERVIEW: This codepen summarizes the performance I need, which is that upon request (click on a button in that case) a pop-up appears (featherlight box in this case) containing a plot, which will be different in all clicks.

BUG/PROBLEM: The problem I am encountering is not in the plot creation, as it can be seen on the codepen, but on the plot interaction. The problems I have encountered are:

• "Zoom" option from modebar (not "Zoom in" or "Zoom out"): when the "Zoom" option is activated, at the very moment I click on the plot to zoom (I guess clicking on the "draglayer" div container) for some reason crashes the page and triggers the featherlight event which is supposed to exit the featherlight box (but keeping the inner content). It is not a problem of the zoom itself as the "Zoom in" and "Zoom out" buttons work perfectly.
• "Pan": Same performance as previous case but in this case there is no chance to pan via buttons on the modebar.

DESIRED/EXPECTED PERFORMANCE: I would expect the "Zoom" and "Pan" options to work without any problem. So I would expect the user to be able to zoom or pan on the plot without exiting the featherlight box

Do any of you can help me understant which events are triggered when clicking on the draglayer or when using the plot Zoom and Pan options? Could any of you find a solution for these case?

Thank you very much!

[etpinard]

Duplicate of #702

But thanks for the very detailed bug report 🍻

[ifll]

I know you closed this issue and mark it as duplicate but I found out what could be the origin for my issue.

To introduce the solution and the problem here you can see two examples, one working and one not working:

• not working: http://codepen.io/NTX11/pen/LxXLxB
• working: http://codepen.io/NTX11/pen/MJzopp

Where the only difference between both codepens is the value for the "z-index" property on the "#backgroundtesterHolder" block.

As it can be seen in the working example I can zoom on the pop up appearing after clicking the "hola" button while in the not working you can't use it.

The issue seems to be that if the plot is placed in a parent div with z-index higher to 999999999 it crashes... Because for some reason, once clicking to zoom or pan it creates a div with class "dragcover" which will always will have z-index at maximum 999999999, and thus it appears to be underneath the plot and crush...

As for my knowledge z-index max-value varies between browsers but it seems to be quite legit that in many of them it is 2147483647.

I guess the solution for this problem would be inheriting the z-index from the parent elements and parse it to the elements created by plotly (or check out why the "dragcover" div it always gives as maximum 999999999 and not the value of the parents...)

Hope I bring some light to this issue...

[ifll]

I even found where in the code could the error be...

https://github.com/plotly/plotly.js/blob/master/src/components/dragelement/index.js

on the function "coverSlip()" it seems that predefault the value used is "999999999" (maybe changing it to "auto" or to the highest value possible it would work)