Line break in inline p in Safari only

[davidfarmer]

When I have inline math inside a p styled inline, an extra line break occurs. In up-to-date Safari only: it is fine in Firefox and Chrome on a MathBook Pro.

This page illustrates the problem:

https://aimath.org/~farmer/print/mathjaxinsafari.html

What you should see is that in the inline p, when I write Suppose (x) is a number. there is a line break before the "x".

I tried (unsuccessfully) to add some CSS to inline style the MathJax spans. (Even if it worked, I don't think that is a great solution, but I could do it temporarily.)

[mitchkeller]

Mobile Safari on iOS is also impacted by this, and thus Chrome on iOS is also exhibiting the behavior.

[Alex-Jordan]

If I set the math renderer to Preview HTML, MathML, or Plain Source, and then reload the page, the line break goes away.

I see the line break if the math renderer is HTML-CSS, Common HTML, or SVG. And also if it is one of these things and I change the renderer to one of the first three things but do not refresh the page.

[nealeyoung]

Seeing same issue here: http://algnotes.info/on/background/stopping-times/walds-dependent/

[pkra]

Looks like a Safari bug (not present in recent WebKit).

Using inline-block instead of inline for the container should avoid this.

[nealeyoung]

Can anyone suggest a workaround (maybe using css) in the meantime?

[davidfarmer]

@nealeyoung on your page I don't think it makes sense for your p paragraphs to be styled inline. Removing that css (so the p defaults to block) should not change the appearance of the page. (That is, remove line 1056, which has the selector

content .inline-first-p > p:first-child

)

If you wanted to have the statement of the lemma start on the same line as the word "Lemma", then you would set everything to be inline. That is the look I want, but it seems that I can't have that and also use Safari.

But if you can't change that css, then there does not seem to be any way to fix it.

[nealeyoung]

Thanks. Yes, I would like what you suggested in your middle paragraph ("Lemma" on same line as following paragraph.) I can change the CSS, but, just as you surmise, if I remove that inline styling, I won't get the effect I want. I've fallen back to floating the "Lemma" left, which works okay most of the time, but sometimes does not have correct vertical alignment (baseline is off).

[dpvc]

The problem has to do with the fact that MathJax uses elements with display set to block-level values in order to measure the em and ex sizes and the container width. Such elements should introduce a line break, but in the past, and with other browsers, inserting these and then removing them before the page is repainted did not cause a permanent line break. Apparently recent versions of WebKit have changed that behavior.

I have worked out another mechanism for doing the measuring (see PR #2006). It has one minor downside, but should resolve the issues here. Unfortunately, there is no easy patch to get the new behavior now so you will have to wait until the next release of MathJax for this. If you are not using automatic line break in your math, it might be possible to use some CSS to avoid the problem for now (by disabling the measuring of the container width, which is the tricky bit). If you want that, I'll see if I can work that out.

[dpvc]

==> In testsuite MathMLToDisplay/issue1982.html

[dcts]

Adding white-space: nowrap; to the p tag styling solved the issue for me.