Search code examples
javascriptcross-platformuser-agentmathjax

MathJax: works in desktop browsers, but only when faking user-agent; works on mobile browsers

So, I've got this page (part of a Wordpress blog), http://gnuradio.org/blog/filtering-time-series-data__elemental-building-blocks/ , which should contain a rendering of my LaTeX formulas, exactly like:

Firefox on Linux, pretending to have the User Agent string of an IPhone 3

It does the same (works!) when I configure my Desktop's Firefox to pretend its user-agent was that of a Firefox running on Android

Sadly, without forcing my firefox to claim its user-agent string is that of an IPhone 3, the formula just never gets rendered; MathJax shows it's typical "initialization messages", but long before these appear, the "raw" LaTeX formula just disappears and never comes back rendered:

Firefox on Linux, not pretending to be someone else

Now, the peculiar thing is: It doesn't work with Chrome under Linux, either, and I've got a friend who reports the same problem with Safari/OS X but with Firefox on an Android device, it works like a charm.

Same goes for Chrome on Android.

So, I tried debugging things, but I haven't gotten beyond the following:

  • Network requests seem to be identical, and so do the responses, no matter what user-agent I use on my desktop PC, aside from the fact that when things work, there's some traffic with cdn.mathjax.org (which is expected, as it loads webfonts)
  • Putting a render job into Mathjax Hub's Queue doesn't help either.

Not being a web dev at all, this is pretty much how far I've gotten. So both hints about what to poke at / use to debug this or definite answers solving my problem are equally welcome.

Solution

  • The problem is that your page is loading code that modifies script elements in the page (http://gnuradio.org/cdn-cgi/nexp/dok3v=1613a3a185/cloudflare/rocket.js, which is titled cloudflarejs-rocketloader-0.11.5 within the file. It may be that cloudflare is adding this automatically without your knowledge, but the result is that the script elements in your page are no longer the standard script DOM elements implemented by the browser, but are a replacement implemented by this script. Unfortunately, the behavior of the replacement is not identical to the original script elements, and that is causing MathJax to not be able to read the math (which is stores in script elements within the page).

    You may be able to overcome that by adding

    <script>
MathJax = {
  AuthorInit: function () {
    MathJax.HTML.getScript = function (node) {return node.textContent}
  }
};
</script>

    to your page just before the script that loads MathJax.js itself.

    Alternatively, try disabling the full CloudFlare optimization.