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?

[vvch]

Jan 28> We'll try to fix it in the coming weeks

Is there any progress in half a year? Did there some serious difficulties appear?
I think this bug deserves high priority since it makes many existing services based on Plotly unusable.

[nicolaskruchten]

We did spend some time on this in February but ran into problems around MathJax versions so we put this aside until 2.0 was released (done last month!) wherein we committed to supporting MathJax 2.7.5 moving forward, and we also upgraded our testing infrastructure. Unfortunately, no one on our staff is available to fix this issue for the next couple of months at least, so we'd really appreciate some assistance if someone from the community wanted to step in an help out :)

[archmoj]

It appears the first version of Firefox causing this issue was v82.0 therefore I renamed the title.

[archmoj]

Firefox releases are here.

[archmoj]

I was able to replicate the bug on Ubuntu using 82.0 <= Firefox <= 93.0.

[archmoj]

Something strange is going on with overflow here:

plotly.js/src/lib/svg_text_utils.js

Line 106 in 073b327

.style({overflow: 'visible', 'pointer-events': 'none'});

[LunarLanding]

Edge works, firefox does not:

import plotly.graph_objects as go
f=go.Figure()

f.update_yaxes(title=dict(text="$log_{10}(D)$", font_size=16))

f.show()

JupyterLab: 3.2.0
MathJax: 2.7.9
Plotly: 5.3.1
Firefox: 93.0
Edge: 94.0.992.50

[archmoj]

It is likely related to this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1709251

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson