MathJax is not applied on initial load. It works after refreshing webpage

  • Resolved Keith

    (@keithkhl)


    4 months, 2 weeks ago

    I think it is likely a cache issue, but cannot find which cache that causes it.

    My pages with MathJax are loaded with MathJax’s JS applied, so I can see a bunch of $\xxx$. When I refresh the webpage, mostly the JS is applied and I can see equations properly.

    Then, when I move around another pages on the same website, I can see unapplied pages. So basically I have to refresh pages with math equations almost always.

    So far,

    • Added ‘/npm/mathjax@3/es5/tex-chtml.js’ to the exclusion lists to WP Rocket
    • Added bypass rule to CloudFlare w/ ‘(http.request.uri.path contains “cdn.jsdelivr.net”)’

    Is there anyone with any similar experience?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author pkra

    (@pkra)

    Hard to say without a live page. My first guess would be that there’s SPA-like routing happening, i.e., clicking a link fetches some data and replaces the body HTML on the fly.

    In that case, MathJax needs to be triggered to render the fresh content, see https://docs.mathjax.org/en/latest/advanced/typeset.html

    Thread Starter Keith

    (@keithkhl)

    @pkra Thank you for the quick feedback.

    This is an example live page that you can take a look.

    Regarding MathJax.typeset(), by this doc, Typesetting and Converting Mathematics — MathJax 3.2 documentation, it seems like the process should be automatic, but somehow on my website, another process blocks the MathJax JS to be called (or loaded) properly.

    Plugin Author pkra

    (@pkra)

    A quick look seems to confirm SPA-style routing.

    this doc, Typesetting and Converting Mathematics — MathJax 3.2 documentation, it seems like the process should be automatic

    That page specifically says:

    it will do this automatically when it is first loaded

    (emphasis mine). When the site adds/replaces content dynamically, MathJax has already completed its automatic-on-load rendering.

    First, I’d try to figure out how the site is doing its client-side routing. Ideally, that will tell you how to hook into the routing. Then a script can leverage that hook to trigger mathjax – the link I had posted earlier will help with the MathJax part.

    Marking this as resolved since it is not an issue with this plugin but the way MathJax and the site’s design interact.

    Thread Starter Keith

    (@keithkhl)

    @pkra Hello, after months of debugging, I finally come to an understanding that it is due to Ajax loading. The website’s template that I use as default relies on Ajax calls for seamless user experience, but unfortunately when it is loaded with Ajax, it does not load Simple Mathjax’s tex-chtml.js.

    I turned off Ajax call on that plugin, so that the website calls for the compiler from //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js.

    Are one of the below CDN js files provide alternatives?

    Or is there any other modification needed to avoid Ajax overlaps?

    Plugin Author pkra

    (@pkra)

    I’m afraid these questions are unrelated to this plugin. You might want to ask the theme’s developers or perhaps the MathJax community for help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.