\underbrace broken in chtml output

[shivam0831]

\underbrace showing broken output in CHTML format but showing correctly in SVG format.

The issue only occurs in the Mobile browser (Chrome Browser)

please help me how can I resolve this issue.

[dpvc]

This may be the same as issue #2598. There was a pull request to resolve the issue, and it has been merged into the develop branch, so it will be in the next release.

Here is a configuration that implements the fix that you can try to see if that takes care of your problem.

<script>
MathJax = {
  startup: {
    ready() {
      //
      //  These would be replaced by import commands if you wanted to make
      //  a proper extension.
      //
      const {TeXFont} = MathJax._.output.chtml.fonts.tex_ts;
      const {CHTMLmo} = MathJax._.output.chtml.Wrappers.mo;

      //
      //  Subclass TeXFont to override the methods that create stretchy
      //  parts in order to add the extra padding to avoid a WebKit bug
      //  that prevents the extenders from being properly placed (#2598).
      //
      class myTeXFont extends TeXFont {
        addDelimiterVPart(styles, c, W, part, n) {
          super.addDelimiterVPart(styles, c, W, part, n);
          const css = styles['mjx-stretchy-v' + c + ' mjx-' + part + ' mjx-c::before'];
          if (!css.padding && !css['padding-left']) {
            css.padding = '.1em 0';
          }
        }
        addDelimiterHPart(styles, c, part, n, force = false) {
          super.addDelimiterHPart(styles, c, part, n, force);
          const css = styles['mjx-stretchy-h' + c + ' mjx-' + part + ' mjx-c::before'];
          if (!css.padding) {
            css['padding-top'] = '1px';
          }
        }
      }

      //
      //  Override style for stretchy extenders to fix an issue in WebKit.
      //
      CHTMLmo.styles['mjx-stretchy-h > mjx-ext > mjx-c'].width = '100%';
      
      //
      //  Create the new TeXFont object
      //
      MathJax.config.chtml.font = new myTeXFont({fontURL: MathJax.config.chtml.fontURL});

      //
      //  Do the usual setup
      //
      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

If this works, then you can use it until the next release of MathJax, which will include these patches already.

That that doesn't do it, let us know.