Plotly.js: 3D graph axis rendering in FF64 + mac

[ShaneHudson]

I've noticed graphs that look perfectly fine in Chrome look "dodgy" in Firefox. I'm not sure if it is to do with antialiasing or what but the labels and axis look many times better in Chrome.

Take the documentation's 3D surface graph for example: https://codepen.io/plotly/pen/MaxrwW

Firefox:

Chrome:

Is there anything that can be done to improve this? Firefox definitely gets a less polished result. While it looks "ok" in the screenshots, if you actually interact with the graphs Firefox is even worse.

[etpinard]

Thanks for the report.

Can you tell us which Firefox version you're using and which OS you're on. Some info about your hardware might be nice also.

Thank again.

[ShaneHudson]

Firefox 64.0 (64-bit)
MacBook Pro (15-inch, 2016) Retina
High Sierra 10.13.6
2.7 GHz Intel Core i7
16 GB 2133 MHz LPDDR3
Radeon Pro 455 2048 MB
Intel HD Graphics 530 1536 MB

Hope that helps :)

[ShaneHudson]

On my project I've got the axis and text as white on grey and it flickers badly on interaction in Firefox (as it does in the demo but more obvious if you change colours).

[ShaneHudson]

Chrome Version 71.0.3578.98 (Official Build) (64-bit) works fine

[etpinard]

Thanks @ShaneHudson

Looks like we have another FF64 + mac bug (cc https://github.com/plotly/plotly.js/issues/3385)

[etpinard]

@archmoj any hints on why this is happening?

[archmoj]

@ShaneHudson thanks for the report.
Could you please download the graphs as png using the Plotly.js modebar (at initial camera position) on Chrome and Firefox, and them upload them here?

[ShaneHudson]

Chrome:
Firefox:

The issue doesn't seem to exist when downloading as png.

[ShaneHudson]

It's slightly worse in Firefox but not as bad as viewing in browser (without even interacting).

[ShaneHudson]

Here's another example of Firefox in browser

[archmoj]

This issue is basically related to a limitation that some browsers (not Chrome) don't apply antialias: true webgl flag.
In the first codepen the antialias is set to false to illustrate similar undesirable performance may happen in Chrome when it is disabled by default.
This second codepen which imports Plotly at 1.44.4 could also be handy for a comparison (again using Chrome) .
@etpinard @alexcjohnson To improve this behaviour for FF & iOS users one idea could be to increase line widths e.g. in gl-axes3d vertex shader program. What do you think of that?

[etpinard]

To improve this behaviour for FF & iOS users one idea could be to increase line widths e.g. in gl-axes3d vertex shader program. What do you think of that?

Yep, let's try that out!

[etpinard]

... and generate all the gl3d baselines up on a branch.

[archmoj]

@ShaneHudson now on iOS and FireFox would you mind checking this third codepen, and also comparing this one which is based on your example; and possibly confirm the improvements?

[ShaneHudson]

That seems to have done the job! Possibly not identical to Chrome but big improvement on what Firefox is currently.

iOS looks fine too :+1:

[archmoj]

@ShaneHudson Thanks for the feedback. Would you mind testing this revised example as well?