amphtml: amp-mathml component does not size properly in ios/safari in some instances

What’s the issue?

The amp-mathml component does not resize properly after the formula renders, for some formulas in ios/safari

The amp-mathml component renders MathML formulas inline. Behind the scenes, this component renders the formula supplied in the data-formula attribute using MathJax. The code waits for the rendering to complete, then resizes the container to match the size of the rendered formula (https://github.com/ampproject/amphtml/blob/9b101fa000b7dc911073cacdf3ccafb187c2012d/3p/mathml.js#L64-L67).

We use this component for AMP pages on FiveThirtyEight.com and one formula we have live in production does not render in safari - on ios or safari desktop. The formula in question does render correctly on android devices and in chrome. Here is the failing formula source possibly useful for a test: <amp-mathml inline="" layout="container" data-formula="\[4\cdot 10^{69}\]"></amp-mathml>

How do we reproduce the issue?

The failing formula is available in production at this URL: https://fivethirtyeight.com/features/are-you-the-perfect-yahtzee-player/amp/ Scroll to the bottom of the page, the last paragraph that begins with For extra credit, you will see the formula rendering chrome, but not safari.

Screenshots

In chrome (and android devices) you can see the formula:

In safari/ios devices, the formula fails to resize, note the 1 px width:

manually changing the width, I see that the formula has actually rendered, its just not showing:

Initial Debugging

debugging, I see that after the formula renders, the code correctly calls context.requestResize with the correct element size (47x16):

Triggering a postMessage:

The resize itself is what seems to fail, This call fails:

https://github.com/ampproject/amphtml/blob/9b101fa000b7dc911073cacdf3ccafb187c2012d/extensions/amp-mathml/0.1/amp-mathml.js#L61

I haven’t quite gotten to the bottom of why the call fails, possibly this is an ios/safari bug?

What browsers are affected?

ios and mac osx safari, safari developer edition. tested safari 11 and 10 on browserstack devices and both failed. android devices tested work fine, as do chrome browsers.

note that only this formula shows a problem, other formulas render (and resize) correctly in safari/ios.

Which AMP version is affected?

This is a new issue because the amp-mathml tag is a new feature. Until this was available, we rendered our math formulas in full width amp-iframes. We are now auditing pages containing formulas and this one popped out as failing. we have many other inline formulas now rendered as amp-mathml components including other small formulas like this one, not certain what is unique about this formula that causes it to fail.