Subscripts and superscripts are incorrectly sized inside SVG when font-size is set on <foreignObject> #2975
Description
Issue Summary
When style="font-size: ..." is set on a <foreignObject> tag inside of an SVG, subscripts and superscripts are incorrectly sized (see the screenshot below).
When no style="font-size: ..." is set on the <foreignObject>, this bug does not appear. The problem exists both for SVG as well as CHTML output, although the size and positioning appears to be slightly different in each case.
Steps to Reproduce:
- Open the HTML below (or open this fiddle).
- Observe subscript and superscript sizing inside of SVG.
Technical details:
- MathJax Version: 3.2.2
- Client OS: Linux 64-bit
- Browsers:
- Chromium 107.0.5304.121
- Firefox 107.0
- Microsoft Edge 106.0.1370.47
I am using the following MathJax configuration: None
and loading MathJax via
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>Supporting information:
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</head>
<body>
<div style="font-size: 40px">Outside SVG: \(\int_a^b f(x)dx\)</div>
<svg xmlns="http://www.w3.org/2000/svg" width="650px" height="550px" viewBox="0 0 65 55">
<foreignObject x="0" y="5" width="65" height="55" style="font-size:4px"><div>Inside SVG: \(\int_a^b f(x)dx\)</div>
</foreignObject>
</svg>
</body>
</html>