Broken math display in page headers

[skalee]

If term name contains mathematical formula, it may be rendered incorrectly on some browsers, even with MathJax enabled. See https://iev-staging.geolexica.org/concepts/103-08-14/.

Firefox
Safari

As it is clearly visible on above picture, p symbol is way too small in Firefox.

Page source:

      <header>
  <h2 class="section-title">
    Concept
    <span class="term-name"><span class="q-open">“</span> 
<math><mi>p</mi></math>-fractile
 ”</span>
  </h2>
</header>

DOM enriched with MathJax (in Firefox):

<h2 class="section-title">
    Concept
    <span class="term-name"><span class="q-open">“</span> 
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 50%; position: relative;" role="presentation" tabindex="0" ctxtmenu_counter="0"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D45D TEX-I"></mjx-c></mjx-mi></mjx-math><mjx-assistive-mml role="presentation" unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>p</mi></math></mjx-assistive-mml></mjx-container>-fractile
 ”</span>
  </h2>

[ronaldtse]

Wow. Maybe this should be reported to the MathJax people?

[skalee]

I'm not sure yet what actually happens. Sometimes it works good, sometimes does not. May be some race condition, not necessarily in their lib…