Fix responsive WebGL figures and modebar

[antoinerg]

Closes #3485 and #3499

Codepen showing the fix: https://codepen.io/antoinerg/pen/bzgeod

How it behaves:

This PR might be easier to review commit by commit!

[etpinard]

@antoinerg very nice PR. Thanks for rebasing those commits!

Have you had the chance to test this branch in IE11?

[antoinerg]

Github gives a warning about using IE11. Codepen just plain doesn't work with IE11. plotly.js deserves a compatibility award for even trying 🏆

On a more serious note though, IE11 has issue with flexbox columns and right now a vertical modebar will overflow:

I'm tempted to open a separate issue for responsive modebar in IE11 since this unwanted behavior is not introduced by the current PR. Also, I don't know if it will be easy or even possible to make the modebar span multiple columns in IE11 using HTML/CSS: I don't want to block the improvements from this PR from getting merged in (in particular it fixes nasty #3485).

Let me know what you think and thanks for reviewing this!

[etpinard]

Codepen just plain doesn't work with IE11

Yeah, I usually use our npm start test dashboard together with browserstack localhost wizardry to test IE11

I'm tempted to open a separate issue for responsive modebar in IE11 since this unwanted behavior is not introduced by the current PR.

Sure!

I don't want to block the improvements from this PR from getting merged in (in particular it fixes nasty #3485).

Good call!

---

💃 💃 💃