David:
Thanks for reporting the issue. It turns out that this is due to a workaround for a Safari bug. MathJax needs to add an explicit width to the mjx-utext node in to avoid a rendering error in Safari, but MathJax is neglecting to scale the size properly for subscripts (or other scaled content).
A work-around would be the following configuration:
MathJax = {
chtml: {
mtextInheritFont: true
},
startup: {
ready() {
const {CHTMLTextNode} = MathJax._.output.chtml.Wrappers.TextNode;
const {CHTMLWrappers} = MathJax._.output.chtml.Wrappers_ts;
CHTMLWrappers[CHTMLTextNode.kind] = class extends CHTMLTextNode {
toCHTML(parent) {
super.toCHTML(parent);
if (this.parent.variant === '-explicitFont') {
const adaptor = this.adaptor;
const node = adaptor.lastChild(parent);
if (!adaptor.getStyle(node, 'width')) return;
const metrics = this.jax.math.metrics;
const scale = this.parent.getBBox().scale;
const width = this.getBBox().w * metrics.em * metrics.scale * scale;
adaptor.setStyle(node, 'width', Math.round(width) + 'px');
}
}
}
MathJax.startup.defaultReady();
}
}
};
It appears, however, that recent versions of Safari no longer have the bug, so you could use
width: initial ! important;
to have these widths ignored if you don't care about older versions of Safari. I don't know about the status of this bug in other WebKit-based browsers, but I assume some of them will also have the problem that these widths are supposed to be fixing.
Davide