Unequal horizontal space between symbols in MathJax v4 + macOS + Chrome (or Safari)
Issue Summary
Unequal horizontal space between symbols on MathJax 4.0.0-alpha.1, macOS 12.6, and Chrome 110.0.5481.100 (or Safari 16.0).
Less noticeable unequal space in: Windows 11 + Chrome 110 and Windows 11 + Edge 110.
Spacing equal in: macOS 12.6 + Firefox 110 and Windows 11 + Firefox 110.
Steps to Reproduce:
- Bootup MacOS 12.6
- Open Chrome 110
- Go to https://codepen.io/alexedgcomb/pen/zYJNjba
Observed: Unequal spacing between p and ∧, than between ∧ and q.
Expected: Equivalent spacing between symbols
Technical details:
- MathJax Version: 4.0.0-alpha.1
- macOS 12.6
- Chrome 110.0.5481.100 (or Safari 16.0)
I am not using MathJax configuration and loading MathJax via
<script src="https://cdn.jsdelivr.net/npm/mathjax-full@4.0.0-alpha.1/es5/tex-mml-svg.min.js"></script>Supporting information:
After typesetting, DOM has an SVG with p, then an mjx-break, then a second SVG with ∧ q.
Different OS and browser combos yield a different font-size for the mjx-break. Below, I've documented various combos using browserstack.com, sorted by mjx-break's font-size.
macOS 12.6 and Chrome 110
mjx-break: `font-size: 9px`
macOS 12.6 and Safari 16
mjx-break: `font-size: 9px`
Windows 11 and Chrome 110
mjx-break: `font-size: 6px`
Windows 11 and Edge 110
mjx-break: `font-size: 6px`
Windows 11 and Firefox 110
mjx-break: `font-size: 3.552px`
macOS 12.6 and Firefox 110
mjx-break: `font-size: 3.552px`