Issue with MathML Rendering of matrix like formulas in Chrome for both on Mac and Android devices

Question

I am using MathML rendering in my website using JQMath.

Issue only on Mac OS and Android Devices - Not in Windows OS

Until now all Mathml formulas are rendering Correclty but after recent update in webkit browsers the formulas are not rendering properly for many matrices or determinants style formulas , please see attached images and please advice any fix for this issue . all my mobile apps and website are affected due to this bug.

Above is the rendering issue for Matrix type formulas in latest chrome versions on both Mac and Android devices I am using Chrome 110.0.5481.177

Expected rendering is shown below

Adding MathML source code for reference

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow class="MJX-TeXAtom-ORD">
    <mrow class="MJX-TeXAtom-ORD">
      <mi mathvariant="normal">A</mi>
    </mrow>
  </mrow>
  <mo>=</mo>
  <mrow>
    <mo>[</mo>
    <mrow class="MJX-TeXAtom-ORD">
      <mtable rowspacing="4pt" columnspacing="1em">
        <mtr>
          <mtd>
            <mrow class="MJX-TeXAtom-ORD">
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="normal">a</mi>
              </mrow>
            </mrow>
          </mtd>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mn>3</mn>
          </mtd>
          <mtd>
            <mn>7</mn>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mn>2</mn>
          </mtd>
          <mtd>
            <mn>5</mn>
          </mtd>
          <mtd>
            <mn>1</mn>
          </mtd>
          <mtd>
            <mn>3</mn>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mn>2</mn>
          </mtd>
          <mtd>
            <mn>4</mn>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mn>0</mn>
          </mtd>
          <mtd>
            <mrow class="MJX-TeXAtom-ORD">
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="normal">b</mi>
              </mrow>
            </mrow>
          </mtd>
        </mtr>
      </mtable>
    </mrow>
    <mo>]</mo>
  </mrow>
</math>

Answer 1

I can verify this bad rendering on macOS Monterey 12.6.3, Chrome version 110.0.5481.177. Also, note a related bug has been reported to Chrome at https://bugs.chromium.org/p/chromium/issues/detail?id=1419746.

More details: Note Chrome is not a webkit browser any more, and also it has other problems with stretchy MathML characters (as do other browsers), as discussed in https://bugs.chromium.org/p/chromium/issues/detail?id=1415218.

Correction (24 Apr 2023): The actual problem in this case is the lack of a good math font. See https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#mathematical_fonts and https://developer.mozilla.org/en-US/docs/Web/MathML/Fonts for more information. You can fix the problem by adding a link to a fallback web font as the first of those pages suggest, or just wait until your users have upgraded their operating systems to one with a math font included, such as macOS Ventura 13 or later as the second of those pages explains.

Answer 2

This is a font issue. If you visit this MathML test page, you can choose your font. You will see similar behavior for not-stretching with some fonts.

Android apparently doesn't ship with math font. Same for at least some Apple devices, although that may be changing.

The solution is that you either need to install a font on your machine or if you are serving pages with math, include a web math font. The referenced MathML test page makes use of many WOFF/WOFF2 fonts. If you are unsure how to include a math web font or where to get them, see the fonts directory of that test page for more info/examples.

Hopefully someday all platforms will have a math font preinstalled and this problem goes away.

I see one bug report mentions needing to add stretchy="true" to the mos to get them to stretch. That should be the default for parens, etc. But if something doesn't stretch and you have the proper math fonts installed or downloaded with the page, that's something to try.