Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mathjax doesn't render for firefox #2616

Closed
chriddyp opened this issue May 4, 2018 · 6 comments · Fixed by #3783
Closed

mathjax doesn't render for firefox #2616

chriddyp opened this issue May 4, 2018 · 6 comments · Fixed by #3783
Assignees
@antoinerg
Labels
bug something broken

Comments

@chriddyp
Copy link
Member

chriddyp commented May 4, 2018

image

originally reported in https://github.com/plotly/streambed/issues/2674, reported again in plotly/dash-core-components#194
@chriddyp chriddyp added the bug something broken label May 4, 2018
@alexcjohnson
Copy link
Collaborator

Huh, if you open http://localhost:3000/devtools/test_dashboard/#mathjax in FF it looks like the only place it works is in annotations, and not even all of those. Interestingly that mock doesn't put any MathJax into the legend, can't recall why, perhaps I had a problem with it in the image server? But yeah, on Chrome it works in the legend.

This is probably a getBoundingClientRect issue, you can see at least one of the missing labels peeking in from the left edge, the others are probably drawn somewhere but completely clipped.

In FF:
screen shot 2018-05-07 at 9 52 17 am

In Chrome:
screen shot 2018-05-07 at 9 55 08 am

@etpinard etpinard mentioned this issue Sep 14, 2018
Closed
@etpinard
Copy link
Contributor

This ticket is still relevant after #3018

image

@etpinard
Copy link
Contributor

From https://community.plot.ly/t/latex-in-axis-title-appears-at-wrong-position-in-firefox/15504, axis titles also appear off in FF

@etpinard etpinard mentioned this issue Nov 27, 2018
Closed
@ibell
Copy link

ibell commented Mar 22, 2019

I can confirm with latest. Here is an example that does not render properly:

<meta charset="UTF-8"> 
<head>
  <script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
  </script>
  <script> window.PlotlyConfig = {MathJaxConfig: 'local'} </script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    var trace1 = {
      x: [.01, .1, 1, 10, 100], 
      y: [1000, 500, 250, 125, 62.5], 
      type: 'scatter'
    };
    var data = [trace1];
    var layout = {
      xaxis: {
        title: '$c$',
      }, 
      yaxis: {
        title: '$a^2+b^2$',
      }
    };
    Plotly.plot('myDiv', data, layout);
  </script>
</body>

@etpinard etpinard changed the title mathjax doesn't render for firefox in legend mathjax doesn't render for firefox Mar 28, 2019
@antoinerg
Copy link
Contributor

Updating MathJax from its 2.3.1 version to the latest 2.7.5 yields:
Screenshot_2019-04-16_21-15-49

We are still missing titles, but the bar chart is much better. I will need to investigate why exactly the titles are not displayed in FF.

To be continued!

@antoinerg
Copy link
Contributor

antoinerg commented Apr 17, 2019 •
edited
Loading

This is probably a getBoundingClientRect issue, you can see at least one of the missing labels peeking in from the left edge, the others are probably drawn somewhere but completely clipped.

As @alexcjohnson hinted at, it is indeed a getBoundingClientRect issue. Basically, we need to patch this function:

plotly.js/src/lib/svg_text_utils.js

Lines 22 to 24 in 172c3e6

function getSize(_selection, _dimension) {
return _selection.node().getBoundingClientRect()[_dimension];
}

@antoinerg antoinerg mentioned this issue Apr 17, 2019
Merged
@antoinerg antoinerg self-assigned this Apr 18, 2019
@j-proc j-proc mentioned this issue Jan 11, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@antoinerg antoinerg

Labels
bug something broken
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix svgTextUtils for FF: use child element instead of SVG to getSize() plotly/plotly.js
5 participants
@antoinerg @chriddyp @ibell @alexcjohnson @etpinard