Skip to content
This repository

MathJax dosen't float well with reveal.js #226

Closed
changhw01 opened this Issue · 14 comments

7 participants

Huang-Wei Chang Lucas Beyer Hakim El Hattab Damián Avila Uwe L. Korn Vincent Knight Marcus D. Hanwell
Huang-Wei Chang

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.

Lucas Beyer

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.

Huang-Wei Chang

@lucasb-eyer Yes, indeed.

Hakim El Hattab
Owner

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();
} );
Lucas Beyer

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.

Hakim El Hattab hakimel referenced this issue from a commit
Hakim El Hattab note about #226 in readme 4c89380
Hakim El Hattab
Owner

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

Damián Avila

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?

Damián Avila

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

Hakim El Hattab
Owner

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?

Uwe L. Korn

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);
});
Damián Avila
Damián Avila

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

Vincent Knight

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...

Vincent Knight

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).

Marcus D. Hanwell

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).

Ramnath Vaidyanathan ramnathv referenced this issue in GitbookIO/gitbook
Closed

Math support #36

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.