MathJax 4.0.0 + CHTML rendering + lazy load lays out incorrectly on macOS 14

[bthomale]

Issue Summary

I've discovered a layout bug with the MathJax CHTML rendering in MathJax 4.0.0.

On macOS 14.x in WKWebView/Safari, if you load mathjax 4.0.0 in CHTML mode using lazy loading, things don't load correctly. It looks like it maybe isn't reserving enough space for things, but I'm not quite sure. The math loads in tiny boxes.

I also put together a simple demo xhtml file to illustrate this.

With lazy load off, it loads fine. With svg mode instead of chtml, it also works fine.

If you open mathml-mj4.0.0-lazy.xhtml in Safari on macOS 14, you'll see the bug. I've tested macOS 12, 13, and 15 and it works fine on all of these. If you open mathml-mj3.2.2-lazy.xhtml you'll see that mathjax 3.2.2 doesn't have the bug.

With the simple demo I put together, all you see are the lines.

We're noticing this bug when we try to use MathJax 4.0.0 in VitalSource Bookshelf (which uses lazy loading). When we run on macOS 14, things don't load correctly. What I'm seeing in Bookshelf is maybe a little different but I imagine it's the same bug? It only loads a tiny tile of the content.

Steps to Reproduce:

1. On a macOS 14.x system, open the attached files "mathml-mj3.2.2-lazy.xhtml" and "mathml-mj4.0.0-lazy.xhtml" from the file system in Safari. They're essentially the same, except one is pinned to version 3.2.2 and the other is pinned to 4.0.0.

Expected behavior: They should look the same.

Actual behavior: They're different. The 4.0.0 rendering seems to just be lines and not text.

Within our app, sometimes we also see the text rendering into tiny boxes on 4.0.0, but only on macOS 14.

Turning off lazy-load fixes it. Switching to SVG rendering fixes it.

I tested macOS 12, 13, 14, and 15 - and of those, it only happens on macOS 14.

Technical details:

• MathJax Version: 3.2
• Client OS: MacOS 14.6.1. (We've seen it with other patch versions of 14, too - every one I've tested)
• Browser: Safari 17.6

I am using the following MathJax configuration:

      window.MathJax = {
        startup: {
          ready: function () {
            MathJax.startup.defaultReady();
            MathJax.startup.promise.then(function () {
              if (console && console.log) console.log("MJ4 typeset complete");
            });
          }
        },
        mml: { parseAs: 'xml' },
        loader: { load: ['ui/lazy'] }
      };

and loading MathJax via

    </script>

    <!-- MathJax 4.0.0 — MathML input, CHTML output -->
    <script id="MathJax-script" type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0/mml-chtml.js"
            defer="defer"></script>

Supporting information:

See attached for screenshots and the xhtml examples you can open in Safari

MJ-4.0.0-lazy-load-bug.zip

. Note that there are screenshots from our app as well, with and without the bug, to show how it manifests there.

[bthomale]

A few additional notes.

Our QA people were using real hardware when they reported the bug, but I'm able to reproduce the problem in a VM. (VirtualBuddy on github is an easy way to fire up an older OS version in a VM.)

I don't see any errors in the console, about fonts or otherwise. It looks like the character data is loading, but it isn't rendering.

I do see that in the browser-based reproduction, it looks like the text is invisible. But in the screenshots from within our app (which are included in that zip), there's clearly text there but its clipped to a tiny box. I'm not sure what that means, if there's 2 different bugs or if the bug is just manifesting differently in the two places. In either case, it only fails under the specific conditions I listed: chtml with lazy loading on, and 4.0.0 (vs 3.2.2 which is fine).

One thing that is different in the app is that we load mathjax dynamically. If we need to, I can set up an html sample that does this as well; if fixing whatever we're seeing here still doesn't solve it, we might have to.

[dpvc]

Thanks for the pointer to VirtualBuddy. That was a big help with this, and it was not a tool I was aware of. I will definitely be able to make use of that in the future.

As for your issue, it looks like the Safari in MacOS v14.6 doesn't properly handle the clip-path CSS specification for xywh() regions. We already have a PR that changes this to use polygon() regions instead that will be part of the next release. But for now, you can use

      mjx-mo > mjx-c, mjx-mi > mjx-c, mjx-mn > mjx-c, mjx-ms > mjx-c, mjx-mtext > mjx-c {
        clip-path: padding-box polygon(
          -1em -2px, calc(100% + 1em) -2px,
          calc(100% + 1em) calc(100% + 2px), -1em calc(100% + 2px)
        ) ! important;
      }
      mjx-stretchy-h {
        clip-path:  padding-box polygon(
          0 -2px, 100% -2px, 100% calc(100% + 2px), 0 calc(100% + 2px)
        ) ! important;
      }
      mjx-stretchy-v {
        clip-path: padding-box polygon(
          -2px 0, calc(100% + 2px) 0, calc(100% + 2px) 100%, -2px 100%
        ) ! important;
      }
      mjx-stretchy-h > mjx-ext {
        clip-path: padding-box polygon(
          0 -1em, 100% -1em, 100% calc(100% + 1em), 0 calc(100% + 1em)
        ) ! important;
      }
      mjx-stretchy-v > mjx-ext {
        clip-path: padding-box polygon(
          -1em 0, calc(100% + 1em) 0, calc(100% + 1em) 100%, -1em 100%
        ) ! important
      }

as part of your CSS to work around that.

This fixes the issue in the stand-alone browser, and I'm hopeful it will take care of your app sitaution, too.

As an aside, it didn't actually depend on lazy typesetting, as I still had the same issue when that was removed, and this CSS issue is independent of that.

I hope this takes care of the problem for you.

[bthomale]

Sounds great! I'll give it a try and let you know. By next release you mean patch (4.0.1?) or next major release?

We're planning to wait for the first patch release to roll mathjax 4 support out anyway. But I'll definitely give injecting that CSS a try in the app, and see if it solves the problem. If for some reason it doesn't, I'll let you know and maybe we can dig further.

[dpvc]

I mean 4.0.1 (or it may be called 4.1 depending on its features).

Do let me know if that fixes the app problem.

[bthomale]

Great news! It looks like that worked! I'm conditionally injecting that CSS into the page whenever the "experimental" mathjax setting is turned on, which is what enables 4.0.0. (We're currently shipping 3.2.2 until we've fully tested things.)

I'm just going to keep that change in here for now. When 4.0.1 is ready, I can back out the workaround.

[dpvc]

Glad it worked for you; excellent news! Thanks for letting us know.