Equation cropped in "HTML-CSS" math renderer, on Safari (macOS) 14.0.3 (MathJax 2.7.5)

[quark67]

Issue Summary

Equation is partially cropped (top of integral in the equation is missing) when viewed in "HTML-CSS" math renderer, in Safari (macOS) 14.0.3.

Steps to Reproduce:

1. Go to https://physics.stackexchange.com/a/622748/172335

2. See equation (1).

Code of the equation : \int_{s_0}^s F ds = \tfrac{1}{2}v^2 - \tfrac{1}{2}v_0^2 \qquad (1)

3. Display in Safari, with "HTML-CSS" math renderer (top of integral is missing):

(the display is the same with or without the Fast Preview setting).

Display in Firefox (v85) is correct (with "HTML-CSS" math renderer).
Display in Safari, but with SVG math renderer is also correct.

Technical details:

• MathJax Version: 2.7.5
• Client OS: macOS 11.2.1
• Browser: Safari 14.0.3

Supporting information:

link: equation (1) of https://physics.stackexchange.com/a/622748/172335

screenshot: above

MathJax information in the "About MathJax":
MathJax v2.7.5 using local STIX fonts
MathJax.js v2.7.5
TeX Input Jax v2.7.5
CommonHTML Output Jax v2.7.5
HTML-CSS Output Jax v2.7.5
PlainSource Output Jax v2.7.5
PreviewHTML Output Jax v2.7.5
SVG Output Jax v2.7.5
mml Element Jax v2.7.5
AssistiveMML Extension v2.7.5
Help Extension v2.7.5
MathEvents Extension v2.7.5
MathMenu Extension v2.7.5
MathZoom Extension v2.7.5
TeX/AMSmath Extension v2.7.5
TeX/AMSsymbols Extension v2.7.5
TeX/begingroup Extension v2.7.5
TeX/noErrors Extension v2.7.5
TeX/noUndefined Extension v2.7.5
accessibility-menu Extension v1.5.0
fast-preview Extension v2.7.5
tex2jax Extension v2.7.5
Safari v14.0.3

[dpvc]

I am not able to reproduce the problem (but I'm at safari 12). Do you have any browser extensions running, and have you tried disabling them? It looks like the element that contains the super- and subscripts has a white background (which it shouldn't) and that is overlaying the integral sign. Can you check the browser console to see if that is true for you?

It may also be another instance of the Safari clipping bug that has been reported several times (e.g., #2435), but that one is usually a horizontal clip rather than a vertical one.

[dpvc]

OPPS, it is not #2435, as that only affects MathJax v3 (and you are using 2.7.5).

[quark67]

I have tried also with all extensions disabled, same bug.
What have I to do with the browser console? I have opened the Web inspector of Safari, then go to the Console tab, but seeing nothing (I don't know how to use it).

Also tried with Safari Technology Preview browser (Release 121 (Safari 14.2, WebKit 16612.1.4.3)). No bug here.

[dpvc]

What have I to do with the browser console? I have opened the Web inspector of Safari, then go to the Console tab, but seeing nothing (I don't know how to use it).

If you are not familiar with inspecting the DOM using the browser console, it is not worth worrying about it. It was a long shot, and probably not the problem anyway.

Are you saying the preview version (14.2) works correctly? In that case, it seems to be a browser bug, and the new version should resolve it.

In the meantime, you could consider using the MathJax contextual menu to switch the renderer from HTML-CSS to CommonHTML or SVG and see if either of those works better. (SVG definitely should, but CommonHTML might.) CTRL-click on any typeset math and use the "Math Settings" then the "Math Renderer" submenus to select an alternative renderer.

[quark67]

Yes, I set it to use the SVG renderer. Thanks.