Bug: Some parts of equations disappear on mathjax3

[Hamarkhis]

Hello,

I have seen for a long time this bug from MathJax version3, whereas it does not exist with MathJax version 2.

I want to be able to upgrade to MaxJax3, but I can't because of this issue.

It has been difficult to isolate it, but I manage to do it.

You can access the issue with the following link.

This is a WordPress site, from a clean and fresh installation, running the MathJax script :

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
	<script>
	MathJax = {
	  tex: {
		inlineMath: [['$', '$'], ['\\(', '\\)']]
	  },
	  svg: {
		fontCache: 'global'
	  }
	};
</script>

Now please take a look at this short video to see exactly what happens on my screen.

Waiting for your feedback

Technical details

• MathJax Version: master - latest from CDN
• Client OS: Catalina 10.15.7
• Browser: Safari 14.0

[zorkow]

Thanks for reporting this. I had a look and can confirm the issue for Safari on Mac. But it seems to be an isolated issue for Safari/webkit only.
Everything renders fine - for different windows and zoom sizes - on blink based browsers I've tested:
Linux: Chrome, Brave, Opera, Edge (!)
MacOS: Chrome
Windows 10: Chrome, Edge

What I find a bit more disconcerting is that the maths on your site does not render at all on Firefox on any OS (W10, Linux, Mac). But that might be a Wordpress related problem.

Can you trie you site with a different browser, e.g., Chrome and see if the problem persists?

[Hamarkhis]

Hello, I just tested with Chrome on my Mac and everything is fine. Thanks for this idea. So there is something that's not working with Safari... I hope that mathjax team can fix this because a lot of my customers are using Safari.

[zorkow]

If it is an CSS issue in the rendering engine, it can be difficult to work around it. Sometimes these issues disappear with the next browser version.

An alternative solution for now is to use the SVG renderer that does not seem to have that problem in Safari. I.e., replace

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

by

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>

in your code.

Another thing I noticed in your page: The script tag with the MathJax configuration object should come before the script tag that loads MathJax. Otherwise it might not be picked up. For some reason it is picked up in your page, but that's not necessarily always the case.

[Hamarkhis]

Thanks for your response and the script tag.

I have changed the mathjax script as you say, but the look is not good, every time I have an inline math $...$ a new line is automatically added, e.g. the HTML code

<p> Pour calculer $\alpha^3$, vous développez le <strong>produit</strong> $\alpha\times \alpha^2.$</p>

do not render well.

See the picture of it or go to the site page.

[dpvc]

every time I have an inline math $...$ a new line is automatically added

This is due to CSS on your site that makes SVG have display: block. Perhaps adding

mix-container > svg {
  display: initial
}

would do it (or maybe display: inline if that doesn't work.

[dpvc]

Note that the original report is a duplicate of #2435.

[Hamarkhis]

Hello, thanks for your help.

I tried this

mix-container > svg {
  display: initial
}

then this

mix-container > svg {
  display: inline
}

But it has no effect.

[dpvc]

Sorry, it should be mjx-container not mix-container (I didn't catch the autocorrect that occurred). Try that out and see if that works.

[Hamarkhis]

Wow, I'm impressed ! I tried

mjx-container > svg {
  display: inline
}

and that's working! Thanks so much.