MathJax ^F search highlight broken

Steps to Reproduce:

Go to https://www.mathjax.org/#demo
Paste in $\Sigma t = 423378$
^F, write "4"

Behold:

Technical details:

MathJax Version: 3.2.2/whatever the demo is
Client OS: Windows 10, Bookworm
Browser: Nightly 139.0a1 (2025-04-02) (64-bit)/ESR 128.6.0esr (64-bit)/DevEd 87.0b9 (64-bit)

I am using the following MathJax configuration:

MathJax = {
  tex: {
    inlineMath:  [['[[',  ']]']],
    displayMath: [['[![', ']!]']]
  },

  // https://github.com/mathjax/MathJax/issues/3345#issuecomment-2731197248
  startup: {
    ready() {
      const {mathjax} = MathJax._.mathjax;
      const {STATE} = MathJax._.core.MathItem;
      const {Menu} = MathJax._.ui.menu.Menu;
      Menu.prototype.rerender = function rerender(start = STATE.TYPESET) {
        this.rerenderStart = Math.min(start, this.rerenderStart);
        const startup = MathJax.startup;
        if(!Menu.loading)
          startup.promise = startup.promise.then(
            () => mathjax.handleRetriesFor(
              () => {
                if (this.rerenderStart <= STATE.COMPILED)
                  this.document.reset({inputJax: []});
                this.document.rerender(this.rerenderStart);
                this.rerenderStart = STATE.LAST;
              }
            )
          );
      };
      MathJax.startup.defaultReady();
    }
  }
}

and loading MathJax via

<script id="MathJax-script" defer src="//cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js"></script>

This is a MathJax bug, since this doesn't happen with either raw MathML input or with extracting the rendered blob from the page:

<!doctype html>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathvariant="normal">&#x3A3;</mi>
  <mi>t</mi>
  <mo>=</mo>
  <mn>423378</mn>
</math>

<figcaption><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 119.6%; position: relative;" tabindex="0" ctxtmenu_counter="103"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D442 TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n"><mjx-c class="mjx-c28"></mjx-c></mjx-mo></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>O</mi><mo stretchy="false">(</mo></math></mjx-assistive-mml></mjx-container><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 119.6%; position: relative;" tabindex="0" ctxtmenu_counter="104"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D45F TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n" space="4"><mjx-c class="mjx-c3D"></mjx-c></mjx-mo><mjx-mn class="mjx-n" space="4"><mjx-c class="mjx-c30"></mjx-c><mjx-c class="mjx-c2E"></mjx-c><mjx-c class="mjx-c30"></mjx-c><mjx-c class="mjx-c32"></mjx-c></mjx-mn><mjx-mo class="mjx-n"><mjx-c class="mjx-c2C"></mjx-c></mjx-mo></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>r</mi><mo>=</mo><mn>0.02</mn><mo>,</mo></math></mjx-assistive-mml></mjx-container> <mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 119.6%; position: relative;" tabindex="0" ctxtmenu_counter="105"><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-mi class="mjx-i"><mjx-c class="mjx-c1D44E TEX-I"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D459 TEX-I"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D452 TEX-I"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D461 TEX-I"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D461 TEX-I"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D452 TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n"><mjx-c class="mjx-c29"></mjx-c></mjx-mo></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>p</mi><mi>a</mi><mi>l</mi><mi>e</mi><mi>t</mi><mi>t</mi><mi>e</mi><mo stretchy="false">)</mo></math></mjx-assistive-mml></mjx-container><br> <mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 119.6%; position: relative;" tabindex="0" ctxtmenu_counter="106"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mi class="mjx-n"><mjx-c class="mjx-c3A3"></mjx-c></mjx-mi><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D461 TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n" space="4"><mjx-c class="mjx-c3D"></mjx-c></mjx-mo><mjx-mn class="mjx-n" space="4"><mjx-c class="mjx-c34"></mjx-c><mjx-c class="mjx-c34"></mjx-c><mjx-c class="mjx-c30"></mjx-c><mjx-c class="mjx-c31"></mjx-c><mjx-c class="mjx-c33"></mjx-c><mjx-c class="mjx-c33"></mjx-c></mjx-mn></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi mathvariant="normal">Σ</mi><mi>t</mi><mo>=</mo><mn>440133</mn></math></mjx-assistive-mml></mjx-container></figcaption>

Apr 06 '25 14:04 nabijaczleweli

This is due to the non-standard height and depth of the MathJax fonts. Those are set to make placement of the character easier, but does have the side-effect of not highlighting the full height of the characters, as seen in your images. The v4 fonts handle this differently, so you should get better results from that, when it is officially released.

For now, this is how MathJax works.

Apr 07 '25 11:04 dpvc

PS, the reason your extracted version doesn't show this is because you are not including the CSS that MathJax inserts into the page, and so are not getting the MathJax fonts with the atypical font metrics. Your final image is using your browser's default fonts instead.

Apr 07 '25 11:04 dpvc