MathJax dosen't float well with reveal.js

[changhw01]

Please see "www.stanford.edu/~huangwei/MySlides" and navigate to the next page.

It happens when I use the HTML-CSS output of MathJax. If we use the SVG output then it is fine. I have tried it using FireFox and Chrom.

[lucasb-eyer]

Same problem in Safari.

Interestingly, it only fails when transitioning to the slide. If you load the page at the slide number (press F5), it displays well.

[changhw01]

@lucasb-eyer Yes, indeed.

[hakimel]

Seems like MathJax is struggling to position itself correctly, probably a conflict with all of transforms that happen in reveal.js. You can fix this by adding the following snippet below the Reveal.initialize call:

Reveal.addEventListener( 'slidechanged', function( event ) {
    MathJax.Hub.Rerender();
} );

[lucasb-eyer]

Thanks for looking into it!

Could you add a sentence about it in the readme, section "Slide change event"? Something like "Some libraries, like MathJax (See #226), get confused by the transforms. Often times, this can be fixed by calling their update or render function from this callback." would suffice.

[hakimel]

Good idea, I've added this to the readme.

[damianavila]

Hakimel, I follow the note... when I go forward in two consecutive slides containing mathjax there is no problem, but when I comeback, it crushes... any idea?

[damianavila]

FYI, the crush happens only with some themes such as default, but no with linear, cube or zoom... Regards

[hakimel]

Hey, not sure why that would happen but I imagine it might just be a local issue. Can you try restarting the browser, or even a different browser to see if it's the same there?

[xhochy]

JFTR: Updating only the formulas on the current slides improves performane quite a lot if you have a large amount of formulas:

Reveal.addEventListener( 'slidechanged', function( event ) {
    MathJax.Hub.Rerender(event.currentSlide);
});

[damianavila]

El 05/12/12 09:47, Uwe L. Korn escribió:

JFTR: Updating only the formulas on the current slides improves performane quite a lot if you have a large amount of formulas:

Reveal.addEventListener( 'slidechanged', function( event ) { MathJax.Hub.Rerender(event.currentSlide); });

— Reply to this email directly or view it on GitHub https://github.com/hakimel/reveal.js/issues/226#issuecomment-11040069.

Thanks for the tip...

[damianavila]

Hakimel, in FIrefox there is no problem... but in Chrome it crush...

[drvinceknight]

I'm only just discovering reveal.js but the mathjax thing is not great... I've got the code suggested by xhochy but now my slides move ever so slightly as the mathjax re-renders... I'm not offering any help (I don't really understand a lot of this) but just letting you know that it's not ideal...

[drvinceknight]

Just reread the start of this threat and seen that I can output to SVG. This seems to work slightly better (still a slight budge when the page loads). Is there any reason to choose SVG over HTML-CSS or vice-versa? (I realise that this is not the right place to ask, apologies).

[cryos]

Still not a great experience out of the box, but switching to SVG reduces rendering issues (although the equations don't look great with all themes).

[jasen0319]

Read and learn

[XertroV]

I found rerendering mathjax on the current and next/prev slide to be a bit buggy (like it confuses auto-animate and sometimes there's ~200ms where the mathjax elements disappear and reappear).

What seemed to work best is rerendering 2 slides away (nextnext and prevprev slides). This also plays nicely with the default viewDistance of 3.

Snippets:

function rerenderIfFlagged(el: Element) {
    if (el.attributes.getNamedItem('x-rerender-math')) {
        //@ts-ignore
        MathJax.Hub.Rerender(el)
    }
}

export function revealOnChangeListener(event: RevealOnChangeEvent) {
    const slast = state.last
    const scurr = {indexh: event.indexh, indexv: event.indexv}
    state.last = some(scurr)

    const hdiff = isSome(slast) ? scurr.indexh - slast.value.indexh : 0
    const direction = hdiff >= 0 ? "forward" : "backwards"

    const currSlide = event.currentSlide
    const prevSlide = currSlide.previousElementSibling
    const prevPrevSlide = prevSlide?.previousElementSibling
    const nextSlide = currSlide.nextElementSibling
    const nextNextSlide = nextSlide?.nextElementSibling
    //@ts-ignore
    if (typeof MathJax != "undefined") {
        [...(prevPrevSlide ? [prevPrevSlide] : []), ...(nextNextSlide ? [nextNextSlide] : [])].forEach(rerenderIfFlagged)
        // if we jump multiple slides, redo all the mathjax
        if (Math.abs(hdiff) > 1) {
            rerenderIfFlagged(currSlide)
            nextSlide && rerenderIfFlagged(nextSlide)
            prevSlide && rerenderIfFlagged(prevSlide)
        }
    }
}

[hakimel]

@XertroV If there are issues I'd to address it in the math plugin. Do you have an example where math rendering is causing issues? I tried a few combinations of math and auto-animate but it worked as intended.

[XertroV]

@XertroV If there are issues I'd to address it in the math plugin. Do you have an example where math rendering is causing issues? I tried a few combinations of math and auto-animate but it worked as intended.

I'm currently using mathjax3 via master (looks like this was just released) and it's amazing -- much faster, don't need any custom logic around redrawing (I use xyjax which needed some massaging with mathjax2), and I've been able to disable all the rerendering stuff. (there are very occasional glitches, but they're tolerable and rerendering doesn't always fix them anyway.)

WRT examples, I can't provide any, sorry (code isn't public atm). But IMO mathjax3 with the new math plugin solves any substantial issues I had.

There are very occasional font-size related glitches I get when using some math across multiple consecutive slides (this happened with mathjax2, also). The font size jumps slightly when auto-animating. I can't reproduce them though -- I don't know how to trigger them in a reliable way. If you're trying to reproduce, try using a lot of $\mathbb{A}$ (or B, C, etc) inline elements (e.g. in paragraphs, headings). Autoanimating between 3-8 slides.

I made my previous comment with the goal of sharing the code (in case anyone went looking for a soln). Rereading it, I didn't make it clear that my circumstances weren't typical. I mention xyjax above, but the deck also has about 250 slides, and plenty of mathjax sprinkled throughout (mb on 25% of slides, and multiple elements/fragments per slide where they appear).

PS. Thanks for a fantastic framework! :)

[hakimel]

Thanks a lot for the info.

Great to hear the new MathJax 3 renderer solved many of the issues for you! That makes me wish that I'd have gone with that over MathJax 2 as the default in today's 4.2.0 release. I'll likely switch to MathJax 3 in the next release instead. If you or anyone else knows of any major differences or reasons we should't default to v3 please let me know.

For the record, if anyone else encounters this and wants to switch to MathJax 3 you'll need to swap out RevealMath for RevealMath.MathJax3 in your initialization:

Reveal.initialize({
  mathjax3: {
    // config options
  },

  plugins: [ RevealMath.MathJax3 ]
});