Broken text layout on IOS devices when using \textbf{} in math environment

Issue Summary

The problem occurs on IOS devices, default Safari browser/webview. Problem can be seen from image below. The bold black texts were set in math environments. It looks like the relative height of the characters to each other get messed up for some words. See image below. "Tägl. Bewegung" looks correct, but "Aktiv" looks wrong.

I am trying to set bold text in a math mode environment. On the desktop computer this looks ok but not on iPhone. Maybe in issue with the font?

Steps to Reproduce:

$$ \textbf{E} = \textbf{BMR} + \textbf{Anpassung} + \textbf{Aktiv} $$

Beide zusammengefasst bilden die \(\textbf{Aktiv}\)-Kalorien.

\(\textbf{T\"agl. Bewegung}\): 

\(\textbf{Aktivit\"at}\):

Any other information you want to share that is relevant to the issue being reported. Especially, why do you consider this to be a bug? What do you expect to happen instead?

Technical details:

• MathJax Version:
  "mathjax-full": "4.0.0-alpha.1", "mathjax-modern-font": "^1.0.0-alpha.1"

I am using the following MathJax configuration:

		<script type='text/javascript'>
			MathJax = {
				loader: { load: ['[tex]/textmacros'] },
				tex: {
					packages: { '[+]': ['textmacros'] }
				},
				output: {
					linebreaks: {
						inline: true,
					}
				},
				options: {
					menuOptions: {
						settings: {
							assistiveMml: false,
							collapsible: false,
							explorer: false
						}
					}
				}
			};
		</script>

and loading MathJax via

<script type='text/javascript' src='../mathjax/tex-mml-chtml.js' async></script>

Supporting information:

The attached file shows the generate HTML from the debug console of the webview (iOS Simulator):

test.txt

Woud be great if someone could comment on a workaround if one exists. Maybe using different latex package for text in math environment?