Previous post

MathML problems in Mobile Safari

December 17, 2024 at 8:01 AM by Dr. Drang

Sometime in the early evening on Sunday, I looked at that day’s Antikythera post on my phone and saw that two of the equations weren’t rendering:

Antikythera page rendered in Safari

This was in Safari. I hadn’t seen the errors before publishing because I’d done all the writing and test viewing on my Mac, and Safari on the Mac rendered the equations just fine. There wasn’t anything wrong with the MathML used to make the equations—it’s hard to make a mistake in equations as simple as those—and I hadn’t heard any complaints from readers, even though seven or eight hours had passed since the post was published. I decided to ignore the problem. Maybe there was something on my phone that was causing me to have a unique issue. I put my phone away and started watching Get Back on Disney+.

But problems typically don’t go away on their own, do they?. When I checked Mastodon later that night, there was a message from tambourineman saying that he was seeing the same error messages on his phone. So the problem wasn’t just with me. And since his phone was running iOS 17.6.1, the rendering issue wasn’t something that appeared in a recent iOS/Safari update.

I opened the page on my iPad and saw the error there. Then I installed Arc, Chrome, Edge, and Firefox and looked at the page in each of them. No errors. Here’s the same portion of the page in Firefox on my phone:

Antikythera page rendered in Firefox

At this point, I felt it was too late for me to make any progress in solving tambourineman’s problem, but in the jingle jangle morning I came back to it.

There’s always been a ragged clown behind Safari’s rendering of MathML, but its problems have typically been poor horizontal spacing and a wandering baseline. Even if I wasn’t thrilled with its results, there always were results—not just an error message.

To reproduce the bug in a smaller example, I copied the page’s source code from around the troublesome equations, wrapped it in tags to create a complete HTML page, and uploaded it to my server to see how Mobile Safari would render this minimal test case. Here it is:

Test page rendered in Safari

(I’ve made it wider than the other screenshots to make the text a little easier to read.)

At first I was disappointed to see that the equations weren’t producing error messages, but that turned out to be a blessing in disguise. In both equations, the number 389.1067 is displayed as a link. That’s three digits, a period, and four digits. The light bulb went off in my head: Safari is treating this as a phone number. None of the other numbers on the page—the ones being displayed correctly—had that format.

“You dumbass,” I said to Safari. “Who puts phone numbers in equations?” But chastising software is about as successful as ignoring problems.

Initially I fixed the problem by splitting up the number in the MathML source. This turned, for example, the second equation from

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mfrac>
    <mn>389.1067</mn>
    <mn>29.1067</mn>
  </mfrac>
  <mo>=</mo>
  <mn>13.3683</mn>
</math>

to

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mfrac>
    <mrow><mn>389</mn><mn>.1067</mn></mrow>
    <mn>29.1067</mn>
  </mfrac>
  <mo>=</mo>
  <mn>13.3683</mn>
</math>

But that wasn’t a very satisfactory solution. With a bit of searching, I found that you can turn off Safari’s automatic formatting of phone numbers as links by including this meta tag in your page:

<meta name="format-detection" content="telephone=no">

Adding the tag eliminated the error message and got the original MathML rendered as expected in every browser I tried. For now, I’ve added this line just to the Antikythera page, but I think it should probably go into the header I use in every page of ANIAT.

As is often the case, I wrote this post as much for future me as for you. Unless I write them down, things like this disappear through the smoke rings of my mind. Thanks to tambourineman for the nudge to put seven-digit numbers far from the twisted reach of crazy Safari.

Update 17 Dec 2024 4:28 PM
Another helpful message on Mastodon, this one from jawbroken, pointing out that the error message I was seeing in the original version of the post was from MathJax, which is absolutely correct. Since I haven’t used MathJax in over a year, I’d forgotten that its messages had that red-on-yellow look.

So why am I getting MathJax error messages if I’m not using it anymore? Well, when I switched over, I was pretty sure that I’d converted all the old MathJax equations to MathML, but I wasn’t absolutely sure. So I left the MathJax configuration stuff in the blog’s boilerplate code just in case there were any stray unconverted equations hanging around. Until now, this hadn’t been a problem.

So in addition to adding the <meta> tag to turn off the autoformatting of things that look like phone numbers, I’ll also strip out all the MathJax configuration code and get rid of its icon over in the sidebar. I need to look up my notes on how to rebuild the entire blog; it’ll be interesting to see how long it takes on my new M4 MacBook Pro.

Previous post