Firefox display issue for dash/mathjax/plotly webapp

Dash Python
1

Hi all,

I wrote a webapp using dash+plotly+mathjax to display some plots and legends with mathematical symbols using latex (something along the lines of https://bitsandbugs.io/2020/07/25/dash-latex/ ). It shows 3 subplots next to each other and it works fine on Chrome, IE and Edge, but not on Firefox. On Firefox all the 3 subplots are being shrank/lumped together towards the left side of the site.

It was deployed here http://codecomparisonproject.pythonanywhere.com/ , you can have a look too.

I upgraded recently my local virtual env to dash2.0.0, plotly 5.5.0, but the issue remained, mathjax is 2.7.7, and my Firefox is currently on 96.0.2

I narrowed down the issue to the mathjax implementation. When I remove it from the webapp, the 3 subplots show fine on Firefox too, but I need the mathjax to display mathematical symbols in plot’s legends and some axis labels properly.

Any ideas what’s wrong with Firefox and how to fix it?

Thanks
cheers, Miro

2

Welcome to the community, Miro @mmicromegas .

Thank you for using Dash and Plotly in your project, and thank you for reporting this bug. Let me report this to one of our engineers. I’ll let you know what they say this week.

Adam

3

thanks Adam, staying tuned for an update … cheers, Miro

4

HI Miro @mmicromegas
I was told that this appears to be a bug introduced by FireFox v82.

We made a temporary workaround in plotly.js v2.6.0 for some cases but not all.
Let me know if that helps.

5

thanks for answer Adam, all clear … best regards, Miro