Partial text shows on iOS when using MathJax font in an inline SVG

[UCDguy]

Issue Summary

When using the MathJax WOFF font files here in an inline SVG, text gets sliced up on iOS devices.

This appears to be related to #2435 that caused a similar issue with equations.

Steps to Reproduce:

1. Create an SVG element, e.g.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.82 171.07"><defs><style>.a{fill:#fff;stroke:#1d1d1b;}.a,.b{stroke-miterlimit:10;}.b{fill:none;stroke:#1d1e1b;}.c,.d,.e{fill:#1d1e1b;}.d,.e{isolation:isolate;font-size:12px;}.d{font-family:MathJax_Math-Italic, MathJax_Math;font-style:italic;}.e{font-family:MathJax_Main-Regular, MathJax_Main;}</style></defs><path class="a" d="M538,74.2" transform="translate(-109.49 -90.46)"/><line class="b" x1="210.75" y1="91.35" x2="164.81" y2="43.8"/><path class="c" d="M277,131.67a3.76,3.76,0,1,0-.09,5.32h0a3.74,3.74,0,0,0,.1-5.3Z" transform="translate(-109.49 -90.46)"/><path class="c" d="M322.67,184.67a3.76,3.76,0,1,0-5.3-.4h0a3.74,3.74,0,0,0,5.29.41Z" transform="translate(-109.49 -90.46)"/><line class="b" x1="68.5" y1="17.2" x2="139.02" y2="153"/><path class="c" d="M245.16,245.18a3.76,3.76,0,1,0,1.61-5.07,3.76,3.76,0,0,0-1.61,5.07Z" transform="translate(-109.49 -90.46)"/><line class="b" x1="12.9" y1="109.88" x2="68.5" y2="17.2"/><line class="b" x1="139.02" y1="153" x2="164.81" y2="43.8"/><path class="c" d="M125.6,202.27a3.76,3.76,0,1,1-1.29-5.16,3.75,3.75,0,0,1,1.29,5.16Z" transform="translate(-109.49 -90.46)"/><path class="c" d="M181.21,109.59a3.75,3.75,0,1,0-5.16,1.29A3.76,3.76,0,0,0,181.21,109.59Z" transform="translate(-109.49 -90.46)"/><line class="b" x1="210.75" y1="153" x2="210.75" y2="91.35"/><path class="c" d="M324,243.45a3.76,3.76,0,1,1-3.76-3.76,3.76,3.76,0,0,1,3.76,3.76Z" transform="translate(-109.49 -90.46)"/><text class="d" transform="translate(0 122.93)">A</text><text class="d" transform="translate(61.25 10.1)">B</text><text class="d" transform="translate(166.82 35.08)">C</text><text class="d" transform="translate(139.42 168.46)">D</text><text class="d" transform="translate(217.78 85.86)">E</text><text class="d" transform="translate(217.81 168.46)">F</text><text class="e" transform="translate(23.77 59.47)">14</text><text class="e" transform="translate(193.82 63.1)">21</text><text class="e" transform="translate(220.82 126.76)">11</text><text class="e" transform="translate(85.02 92.15)">11</text><text class="e" transform="translate(138.57 97.51)">2</text></svg>

2. Use font-face to define the included font families.

@font-face {
          font-family: 'MathJax_Main-Regular';
	  font-style: normal;
	  font-weight: normal;
          src: url("URL_HERE1") format("woff2");
        }

@font-face {
          font-family: 'MathJax_Math-Italic';
	  font-style: italic;
	  font-weight: normal;
          src: url("URL_HERE2") format("woff2");
        }

where "URL_HERE1" and "URL_HERE2" point to MathJax_Main-Regular.woff and MathJax_Math-Italic.woff files respectively that are locally hosted.

Technical details:

• MathJax Version: 3.2
• Client OS: iOS (tested on many iOS devices using BroswerStack)
• Browser: Safari, Chrome, Firefox...

I am using the following MathJax configuration:

N/A (no need to load MathJax)

and loading MathJax via

N/A (no need to load MathJax)

Supporting information:

Here is a screenshot of the sample SVG mentioned above. This is how it appears on all devices except those running iOS.

On iOS devices, it instead appears like this.

This issue is caused by the font file rather than my code as when I instead use a different font file, e.g. the STIX fonts here, the issue goes away.

Also, this issue is caused by an operating system (iOS) and not a browser (e.g. Safari) as the issues occurs on both Chrome and Safari on iOS but doesn't occur on either Chrome or Safari on Mac.

This therefore suggests that it's the same as #2435 which caused a similar issue with equations.

Workarounds

1. Use a different font file, e.g. STIX fonts.

However, there are significant differences between that font and the MathJax font. It can therefore be a bit jarring if you write an equation using MathJax font and then create an SVG directly after that which references that equation but uses a different font.

2. Convert the font to outlines using e.g. Adobe Illustrator

This is the approach that I've been using for many years. However, the quality of the image decreases on low resolution screens compared to directly pointing to the font file, similar to how outputting equations using CommonHTML appears better than SVG.

Possible solutions

1. Issue 2435 was fixed in equations by using "will-change:opacity" as committed here. I've tried to use the same approach with images by using either "svg{will-change:opacity;}" or "text{will-change:opacity;}" but nothing changes.
2. Issue 2435 also mentions that using “transform: translateZ(0);” fixes the issue in equations. However, applying that to my SVG text instead causes the text to disappear.

3. Use "dumbed-down" versions of the MathJax font files. However, I'm a bit lost as to how to do that. Issue 2435 mentions that converting the WOFF file to TTF and then back to WOFF fixes the issue with equations. Unfortunately, I've tried this but the issue still persists.

---

I understand that this is of course not the main purpose of MathJax. However, I think many people would benefit from being able to output a high resolution equation using CommonHTML and to follow that equation by referencing it using a high resolution image that uses the exact same font.

[dpvc]

As mentioned in #2435, the MathJax TeX fonts have some metrics set to unusual values (the ascent and descent values are set to nearly zero, and would have been zero if it weren't; for a WebKit issue with that). This makes it easier to handle the placement of the characters in relation to their baselines. MathJax then uses additional CSS to form the proper bounding box around the characters. The flickering described in #2435 is due to the fact that during page redrawing (like when the page scrolls), WebKit sometimes seems to clip the font to the ascent/descent values, presumably for efficiency. That could leave some parts of the expression un-rendered.

It looks like the SVG text renderer clips to the ascent/descent values, and I don' t see a way to work around that. But you could use the v2 font files, which don't have the modified ascent/descent values. They are at

https://github.com/mathjax/MathJax/tree/legacy-v2/fonts/HTML-CSS/TeX/woff

or via the URL

https://cdn.jsdelivr.net/npm/mathjax@2/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff

for example. Note, however, that it looks like SVG clips horizontally as well, and some characters extend beyond their advance width (e.g., the "F" in your diagram). You may want to add a non-breaking space at the end of the labels in that case to make sure that the clipping doesn't clip the character. In a few cases, you may need a space at the beginning as well (e.g., lower case j).