LaTeX/MathJax broken using Firefox v82.0

[MRScheid]

Hi Plotly team, I just recently updated my firefox browser to version 84.0.1 and have been using plotly's (v4.14.1) subplots in Jupyter notebook (v6.0.3) with Python (v3.7.6) for a couple months now without issue. I noticed that with this new version of the browser when I call something like:

from plotly.subplots import make_subplots

fig = make_subplots(1, 3, subplot_titles=[1, 2, 3])
fig['layout'].update(width=1200, height=1200)
fig.add_trace(go.Scatter(x=[1 , 2 , 3], 
                             y=[1 , 2 , 3], 
                             name='$123$',
                            ),
                  row=1,
                  col=1
                 )

fig.add_trace(go.Scatter(x=[1 , 2 , 3], 
                         y=[1 , 2 , 3], 
                        ),
                  row=1,
                  col=2
                 )

fig.show()

The figures do not render properly and when I try to toggle the traces by clicking on the legend, all of the plots shrink and are illegible. This issue seems to be caused whenever I add Latex to the legend str using the name argument in go.Scatter while ALSO using the update command to manually set the width and height of the figure. If I do only one or the other, the behavior seems to go back to normal. It also seems to be unique to Firefox, as I did not have an issue with Chrome when I tested this with the same environment. Hoping this is enough information to create a reproducible example and solve this issue.

[alexcjohnson]

Thanks @MRScheid - confirmed with FF84 on my Mac, at for example https://plotly.github.io/LaTeX-basics/

It looks like the LaTeX renders, but has some sort of bounding box error.

[jaladh-singhal]

@alexcjohnson when can we expect this to be fixed?

[nicolaskruchten]

We'll try to fix it in the coming weeks but we'd sure appreciate some help!

[antoinerg]

On Firefox 84.0.2, I noticed that the latest version of MathJax 2.x (2.7.9) behaves very differently from the one checked into our repo (2.3). Based on this, I'm not sure there will be one solution that will work for both MathJax versions.

For example, using my tentative fix, I get this on 2.7.9:

But on 2.3 I get:

On the other hand, Chromium renders the correct result for both MathJax versions.

Would a fix only targeting MathJax 2.7.9 be good enough @alexcjohnson ?

[antoinerg]

For reference, this is what the very same mock looks like in Firefox 84.0.2 on Linux on master branch:

[alexcjohnson]

We can certainly upgrade to 2.7.9 and drop 2.3, especially if we can get this into our v2 release. In fact in a perfect world we'd upgrade to MathJax v3 in plotly.js v2, but I assume that'll be more than a one-afternoon change, so not something we can do right now.

[antoinerg]

Ok, so I'll try to come up with a patch to fix the issue in MathJax 2.7.x!

[maresb]

Is there any known workaround, or is LaTeX in Plotly just plain broken for all recent Firefox versions?