letters do not align to baseline in multicharacter identifiers (WebKit)

[xworld21]

Issue Summary

Characters are not aligned to the baseline on WebKit: The alignment error changes with the font size as well, as you can see in the screenshot. Changing zoom level in the browser also changes the alignment of the characters.

I can't say for sure from which version of Safari this happens. I don't test Safari often and I was told about this only recently.

Steps to Reproduce:

<math>
  <mrow>
    <mi>sin</mi>
  </mrow>
</math>
<span style="font-size: 180%">
  <math>
    <mrow>
      <mi>sin</mi>
    </mrow>
  </math>
</span>
<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>

Technical details:

• MathJax Version: 3.2.2
• Client OS: macOS 14.7.2
• Browser: Safari 18.2

I am using the following MathJax configuration: no configuration

and loading MathJax via

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

Supporting information:

Live example: https://codepen.io/xworld21/pen/MYWzEyW

My screenshot is from a non-HiDPI screen.

[dpvc]

This is a duplicate of several other issues. See, for example, #3325 and #2866. This is a WebKit bug, and one that MathJax can't do much about. In v4, the situation for multi-character identifiers (like your sin) is improved, but that doesn't take care of all the situations that are affected. Switching to SVG may be the best option for WebKit users.

[dpvc]

The situation for this is improved in v4.0, though not entirely resolved. But it is the best we can do to avoid the underlying browser bug.