Burrs around formulas when rendering on Safari and svg mode

[ShuJun-Junical]

Issue Summary

When using the webkit that comes with the system on Apple systems (macOS, iPadOS, iOS) and using svg mode, there are burrs around the rendered formulas. As you can see in the picture below.

The image above is rendered by Safari on macOS, see below for the specific version

I think the formula for correct rendering would be like the picture below

The image above was rendered by Firefox on macOS without the burr issue

I'm not a developer using MathJax, I just noticed this on a number of sites that use MathJax with svg mode.

Steps to Reproduce:

1. Use Safari on macOS, iPad OS or iOS
2. Use svg mode of MathJax
3. Render some formula

Technical details:

• MathJax Version:
  • 3.2.2 (the version that used in your offical website)
  • 2.7.9 (the version that used in zhihu.com)
• Client OS:
  • macOS 13.6.2 (22G320)
  • iOS 17.1.1
  • iPadOS 16.6
• Browser:
  • Safari 17.1 (18616.2.9.11.10, 18616) (on macOS)
  • Safari on iOS (default version of the above iOS version)
  • Safari on iPadOS (default version of the above iPadOS version)

I can't provide the code or config file to use mathjax because I'm not a web developer, I just noticed the issue on websites.

Supporting information:

• I found this problem when I was browsing Zhihu using safari, and realized that this problem also occurs on the official website of mathjax
• By trying the example on the official website, I found that it only reproduces when using the svg rendering mode, and has no problem using common html
• I then tried browsing each of these pages with different browsers and operating systems, and found that the problem only occurs when using the apple system Webview, it works ok on Firefox, Edge or Chrome (on my macOS).
• There are no mathjax errors in the console of browser.

I'd be happy to provide more detailed information or assist with testing on apple devices, and I have some front-end development skills of my own.

[dpvc]

Thank you for your detailed report. You are correct that the SVG output in WebKit browsers like Safari can show such problems. The fonts are quite old and were produced using the mftrace program to trace bitmapped fonts to produce the needed outlines. Its output is sub-optimal, and while SVG renderer at the time (2008) showed them well, the current WebKit render does show these artifacts.

MathJax version 4 (currently out in beta release) has replaced these older fonts with more professional fonts (based on the Latin Modern font set) as the defaults, and makes 10 other fonts available as well, so this will be fixed in the official v4 release.