Rendering doesn't work in Chrome, but works in Firefox

[Jelle Roorda]

I'm creating a rich text editor with Tiptap together with MathJax to render Math nicely. I'm trying to get it working first, so I've used the full version:

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

In Vue (Tiptap is based on VueJS) I'm rendering the passed in TeX and creating MathML as output. The code used for this is pretty straight forward:

```javascript

// Render the tex to MathML
this.$refs.render.innerHTML = window.MathJax.tex2mml(TeX, {em: 12, ex: 6, display: false});

// Add the necessary stylesheet to the head.
let sheet = document.querySelector('#MJX-CHTML-styles');
if (sheet) sheet.parentNode.removeChild(sheet);
document.head.appendChild(MathJax.chtmlStylesheet());

```

This results in a proper result in Firefox, where it looks like this:

However, when I do the same thing in a chromium based browser (Brave Version 1.20.110, Chromium: 88.0.4324.192 (Official Build) (x86_64)) it looks like this:

It looks to me like the CSS styling is not being properly loaded; however it's there in both Firefox as well as the Brave browser in the inspector:

Is there anything obvious that I have missed, that could cause this weird rendering in a chromium based browser?

Thanks in advance!

Jelle

[Davide Cervone]

You are using the tex2mml() function, which generates MathML (not HTML or SVG), and inserting that into the page.  Firefox has native MathML support, so it displays it properly, but Chromium-based browsers do not support MathML, so you get the result that you are seeing.

You should use MathJax.tex2chtml() to get HTML output that will render in all browsers.

Good luck!

Davide

On Mar 3, 2021, at 5:52 AM, Jelle Roorda <goo...@roordaict.nl> wrote:

I'm creating a rich text editor with Tiptap together with MathJax to render Math nicely. I'm trying to get it working first, so I've used the full version:

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

In Vue (Tiptap is based on VueJS) I'm rendering the passed in TeX and creating MathML as output. The code used for this is pretty straight forward:

```javascript

// Render the tex to MathML
this.$refs.render.innerHTML = window.MathJax.tex2mml(TeX, {em: 12, ex: 6, display: false});

// Add the necessary stylesheet to the head.
let sheet = document.querySelector('#MJX-CHTML-styles');
if (sheet) sheet.parentNode.removeChild(sheet);
document.head.appendChild(MathJax.chtmlStylesheet());

```

This results in a proper result in Firefox, where it looks like this:

<Screenshot 2021-03-03 at 11.45.54.png>

However, when I do the same thing in a chromium based browser (Brave Version 1.20.110, Chromium: 88.0.4324.192 (Official Build) (x86_64)) it looks like this:

<Screenshot 2021-03-03 at 11.47.07.png>

It looks to me like the CSS styling is not being properly loaded; however it's there in both Firefox as well as the Brave browser in the inspector:

<Screenshot 2021-03-03 at 11.49.34.png>

Is there anything obvious that I have missed, that could cause this weird rendering in a chromium based browser?

Thanks in advance!

Jelle

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/eec7d491-093a-4e70-9eb5-fa00d6e92533n%40googlegroups.com.
<Screenshot 2021-03-03 at 11.47.07.png><Screenshot 2021-03-03 at 11.49.34.png><Screenshot 2021-03-03 at 11.45.54.png>