Reactjs – Inconsistent MathML rendering with MathJax across different browsers

The inconsistency you’re observing across different browsers is a known issue when it comes to rendering MathML (or, in fact, many other web standards). While MathJax does a commendable job at providing consistent rendering for LaTeX, its rendering of MathML can still vary due to how different browsers handle MathML natively.

Here are some general suggestions to help you improve the consistency:

External CSS Styles:

Sometimes, browsers may apply different default styles to MathML elements. To counteract this, use a global MathML stylesheet to standardize the appearance across browsers. This is a common strategy when web developers need to ensure a consistent look and feel across all web browsers.

JavaScript Fallbacks:

If certain MathML features are rendered inconsistently across browsers, you might consider writing JavaScript to detect the browser and make adjustments. This is a more advanced approach and might be overkill for smaller projects, but it can be effective.
Convert MathML to LaTeX:

If you are in control of the MathML and can convert it to LaTeX, MathJax’s LaTeX renderer is often more consistent across browsers than its MathML renderer. Converting to LaTeX and using that as input might be a more robust solution.

Update Libraries:

Ensure that both better-react-mathjax and MathJax are at their latest versions. Developers often release patches to address these types of cross-browser inconsistencies.
Check Configurations:

Ensure that MathJax is being initialized with configurations that are browser-agnostic. Custom configurations might inadvertently cause differences in rendering between browsers.

Feedback to Developers:

Consider creating an issue on the better-react-mathjax GitHub repository or the main MathJax repository detailing your findings, complete with screenshots and specifics. Open-source communities can be instrumental in providing solutions or workarounds.

Alternative Libraries:

If you’re facing too many issues, consider alternative libraries or tools. For instance, KaTeX is a popular alternative to MathJax for rendering math on the web. However, note that it primarily supports LaTeX.

MathJax Configuration:

While you mentioned trying various configurations, it might still be worth revisiting. In the configuration, make sure to set the preferred renderer to SVG for consistency:

MathJax = {
    loader: {load: ['input/mathml', 'output/svg']},
    startup: {
        pageReady() {
            const options = MathJax.getMetricsFor(document.body, {em: 16, ex: 8, containerWidth: 80*16});
            options.MathML = {
            scale: options.em/16
            };
            return MathJax.startup.defaultPageReady();
        }
    }
};

Lastly, remember that the web is an ever-evolving platform. Browser updates can affect rendering. So, always ensure you are testing on the latest versions of browsers, and keep your libraries updated as well.