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

Created by: 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 (closed) that caused a similar issue with equations.

Steps to Reproduce:

Create an SVG element, e.g.

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 (closed) which caused a similar issue with equations.

Workarounds

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.

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

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.
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.

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.