Lazy UI rendering for "block" fails in Safari with "overflow-x: auto"

[sethrj]

Issue Summary

With the latest Safari on macOS, using the Furo style sheets (2025.12.19), the "lazy" UI loader does not render math blocks, but inline text renders. After bisecting the generated HTML, this seems to happen due to the overflow-x: auto; property being applied to the div enclosing the math.

Steps to Reproduce:

1. Load a page with Safari and the ui/lazy loader, e.g.: https://celeritas-project.github.io/celeritas/user/implementation/em-physics/brems.html#cross-sections
2. Inline mathjax renders, but blocks do not.

Reloading without ui/lazy allows normal rendering. The page also seems to
work in Chrome. It also works if the overflow-x: auto; is removed.

Technical details:

• MathJax Version: 3.2.2 OR 4.1.2
• Client OS: (e.g., Mac OS X 10.8.4)
• Browser: Safari 26.5 (21624.2.5.11.4)

I am using the following MathJax configuration:

MathJax = {"loader": {"load": ["ui/lazy"]}}
};

and loading MathJax via

    <script defer="defer" src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

Supporting information:

• Generated with sphinx
• live example with failure
• No console messages

After `MathJax.startup.document.state(0, true);`:

With overflow-x removed:

[dpvc]

Thanks for your report. I am not able to reproduce the issue, but I am running an older version of Mac OS and Safari:

I will have to consider upgrading to the latest version at some point, but wasn't ready to do it just yet. This may push up the date for that for me.

[dpvc]

On the other hadn't, it may be that the example page you link to isn't really illustrating the problem. It looks like it is using MathJax v3.2.2, not v4.1.2 so perhaps that doesn't exhibit the issue?

[sethrj]

Thanks for the response @dpvc! I also built it locally with bleeding-edge sphinx+furo (which uses mathjax 4.1.2). I will see if I can get a build that demonstrates the issue with the newer version.

FWIW I think this may be a new safari bug/incompatibility, since the rendering issue definitely didn't show up a month or two ago, and the toolchain I've been using hasn't changed since then.

[sethrj]

@dpvc Actually it was easier than I thought to bump: please see https://sethrj.github.io/celeritas/user/implementation/em-physics/brems.html#_CPPv4I0EN9celeritas20SBEnergyDistributionE for a live demonstration

With vanilla safari:

rendering

with mathjax (ctrl-clicking on inline text that renders):

and disabling the overflow-x:

fixes the lazy rendering:

[sethrj]

Thanks again for your help and support of such an excellent tool!

[dpvc]

I think this may be a new safari bug/incompatibility

I agree. There have been several issues crop up with Safari v26. Your new page still works fine for me in my older Safari.

If you open the math-wrapper div, and the one inside it, do you see the mjx-container node? And does it have any content? Ans is that content zero height?

If you remove the overflow-x from the div, and use the MathJax contextual menu to select "Math Settings -> Wide Expressions -> Scroll" and reload the page, does that make a difference?

[sethrj]

I'll check in one second. In the meantime, I added a breakpoint to the lazyObserve function. By default it looks like the intersect rect is zero:

When I re-enable breakpoints and then disable the overflow-x attribute, the lazyObserve call is immediately invoked :

and the content correctly displays.

[dpvc]

Thanks for the additional details. The lazyObserve() method does skip any entries where isInsersecting is false, so that does seem to be the issue. I'm not sure why overflow-x would cause that behavior, but I'm hoping that using MathJax's scroll option will work for you instead.

[sethrj]

If you open the math-wrapper div, and the one inside it, do you see the mjx-container node? And does it have any content? Ans is that content zero height?

It has no content and lists no height.

If you remove the overflow-x from the div, and use the MathJax contextual menu to select "Math Settings -> Wide Expressions -> Scroll" and reload the page, does that make a difference?

Removing overflow-x immediately lets the text render. No changes to the mathjax settings have any effect: when reloading the overflow-x reactivates and the blocks continue to be hidden.

[sethrj]

A possible workaround on the mathjax side: putting any placeholder text inside the mjx-lazy tag:

causes the text to render (here's the debugger output again):

[dpvc]

It has no content and lists no height.

Once you found out that the IntersectionObserverEntry had isIntersecting: false, that explains why there is no content, as MathJax will skip the entry in that case.

when reloading the overflow-x reactivates

Is it possible to remove that from the CSS (temporarily) to see if the math renders and that the MathJax scroll setting does what you need for wide expressions? (Which is what the overflow-x was supposed to do.)

Are you able to set the MathJax configuration? If so, another alternative would be to override the lazyObserve() function and not have it skip in that case.

In your very first image of the IntersectionObserverEntry, could you open the boundingClipRect property? I'm wondering if that could be used to resolve the issue.

A possible workaround on the mathjax side: putting any placeholder text inside the mjx-lazy tag:

Possible, I suppose, though it doesn't make me happy. But it should be possible to add a renderAction that adds these spaces, if you want to try that out.