{{ message }}
/ reveal.js Public

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

Closed
opened this issue Nov 5, 2012 · 19 comments
Closed

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

opened this issue Nov 5, 2012 · 19 comments

### changhw01 commented Nov 5, 2012

 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. The text was updated successfully, but these errors were encountered:

### lucasb-eyer commented Nov 7, 2012

 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 commented Nov 7, 2012

 @lucasb-eyer Yes, indeed.

### hakimel commented Nov 11, 2012

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

closed this as completed Nov 11, 2012

### lucasb-eyer commented Nov 11, 2012

 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.

added a commit that referenced this issue Nov 12, 2012
 note about #226 in readme 
 4c89380 

### damianavila commented Nov 27, 2012

 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 commented Nov 27, 2012

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

### hakimel commented Nov 27, 2012

 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 commented Dec 5, 2012

 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 commented Dec 5, 2012

 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 #226 (comment). Thanks for the tip...

### damianavila commented Dec 5, 2012

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

### drvinceknight commented Dec 7, 2012

 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 commented Dec 7, 2012

 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 commented Sep 15, 2013

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

pushed a commit to enovajuan/reveal.js that referenced this issue Dec 2, 2014
 note about hakimel#226 in readme 
 bd645cc 

### jasen0319 commented Mar 3, 2015

mentioned this issue Aug 28, 2018
mentioned this issue Oct 12, 2019

### XertroV commented Oct 28, 2021

 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 commented Nov 12, 2021

 @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 commented Nov 12, 2021 • edited

 @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 commented Nov 12, 2021

 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 ] });