Overlapping output when using serveral expressions on the same page

[Stefan Norberg]

I'm getting overlapping output in all expressions but the last when rendering multiple expressions on the same page:

    "mathjax-fira-font": "1.0.0-alpha.1",
    "mathjax-full": "4.0.0-alpha.1",

I'm using this method of rendering:

    async doInitMathJax() {
        const {mathjax} = await import("mathjax-full/js/mathjax");
        const {MathML} = await import("mathjax-full/js/input/mathml");
        const {CHTML} = await import("mathjax-full/js/output/chtml");
        const {MathJaxFiraFont} = await import("mathjax-fira-font/js/output/fonts/mathjax-fira/chtml");
        const {browserAdaptor} = await import("mathjax-full/js/adaptors/browserAdaptor");
        const handler = await import("mathjax-full/js/handlers/html.js");
        handler.RegisterHTMLHandler(browserAdaptor());
        const font = new MathJaxFiraFont({fontURL: '/assets/mathjax-fonts'});
        return {MathJax: mathjax, MathML: MathML, CHTML: CHTML, font: font}
    }

    ngOnInit(): void {
        this.doInitMathJax().then(result => {
            const {MathJax, MathML, CHTML, font} = result;

                this.elementRef.nativeElement.innerHTML = mathml(asciimath);

                this.HTML = MathJax.document(window.document, {
                    InputJax: new MathML(),
                    OutputJax: new CHTML({font: font})
                });

                this.HTML.findMath({elements: [this.elementRef.nativeElement]})
                    .compile()
                    .typeset()
                    .updateDocument()
                    .clear();
            });
        });
    }

Worked fine in MathJax3 (beta2).

[Stefan Norberg]

Every expression has its own Angular component that runs the code above. this.elementRef is a ref to the component local element. Any ideas?

[Stefan Norberg]

Another example:

[Stefan Norberg]

I solved the issue by moving the creation of the MathDocument into a singleton and cached it there.

This component now reuses that instance and calls findMath for each expression.