MathJax icon indicating copy to clipboard operation
MathJax copied to clipboard

Problem with brackets rendering

Open Sea82 opened this issue 3 years ago • 5 comments

Issue Summary

Hello there. I'm experiencing problems with brackets rendering (Mathjax V3). Brackets appear split into pieces (using \begin{cases} \end{cases}, \left, \right and \overbrace, \underbrace commands). Results change depending on the zoom factor of the browser. The bug appears under Wordpress 5.9.2 and I am using Google Chrome Version 99.0.4844.51. I'm using the Wordpress plug-in Simple Mathjax. I temporary fixed the issue by downgrading to version 2 of MathJax (the plug-in allows for selecting the major version desired). Things worked fine with previous versions of Wordpress (sadly, don't know for sure what was the last version that didn't present this issue, still a version lower than 5.9.0). The same problem occurs using other Wordpress themes.

Steps to Reproduce:

The following Latex code:

\begin{cases}x+\dfrac{5}{4}y+\dfrac{1}{2}z=-\dfrac{1}{4} \\ \\ \dfrac{1}{3}x-\dfrac{1}{2}y+\dfrac{2}{3}z=\dfrac{1}{6} \\ \\ x-\dfrac{1}{4}y+z=0 \end{cases}

would result in brackets split into pieces, with missing parts.

Technical details:

  • MathJax Version: 3 (//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js)
  • Client OS: Windows 10
  • Browser: Chrome 99.0.4844.51

Supporting information:

Here's a test page: https://www.altermath.org/test-page-for-mathjax/

image

I originally experienced the bug on https://www.altramatica.altervista.org (now I'm forced to use Mathjax V2 there). Configuration file used by the Wordpress plug-in Simple Mathjax:

MathJax = { tex: { inlineMath: [['$','$'],['\\(','\\)']], processEscapes: true }, options: { ignoreHtmlClass: 'tex2jax_ignore|editor-rich-text' } };

Thank you for the attention, and thanks for Mathjax!

Sea82 avatar Mar 18 '22 14:03 Sea82

I'm not able to reproduce this in Windows 11, or in an old copy of Windows 10. Your test page shows properly for me.

We are working on a major update to the font handling, and that may resolve this issue, but since I can't reproduce it, it is hard to test.

now I'm forced to use Mathjax V2 there

Have you tried switching to SVG output (v3) instead? That might work better for you.

dpvc avatar Mar 21 '22 14:03 dpvc

Hello, thank you very much, I fixed the issue by using svg output. It works just fine now. Anyway, as for the problem with "standard" output, here are detailed info of my PC and Windows version, hope these can help. Also, on my system the problem also shows in Microsoft Edge (99.0.1150.46). It does not show with Opera instead (version 84.0.4316.42). With SVG output, everything works fine with all browsers I have.

Many thanks again.

Edizione Windows 10 Home Versione 21H1 Data installazione: ‎16/‎01/‎2021 Build sistema operativo 19043.1586 Numero di serie PF2047T5 Esperienza Windows Feature Experience Pack 120.2212.4170.0

Nome dispositivo LAPTOP-VHK04PRR Processore AMD Ryzen 7 4800H with Radeon Graphics 2.90 GHz RAM installata 16,0 GB (15,4 GB utilizzabile) ID dispositivo 97A1C99B-1D19-489A-8C4A-E8AAA314F1CF ID prodotto 00325-96734-76671-AAOEM Tipo sistema Sistema operativo a 64 bit, processore basato su x64 Penna e tocco Supporto input penna

Sea82 avatar Mar 21 '22 17:03 Sea82

Encountered this too.

image image

Works fine when the zoom level of the page is 25%, but not when zoom level is bigger.

conql avatar Aug 13 '22 11:08 conql

Steps to Reproduce

In official live demo, type in the following Latex code and zoom to different level.

$$
\left. \begin{array}{c}
x \equiv a_{1}\pmod m_{1} \\
x \equiv a_{2}\pmod m_{2} \\
x \equiv a_{3}\pmod m_{3} \\
\quad \cdots \\
x \equiv a_{k}\pmod m_{k}
\end{array}\right\}
$$

Technical details:

MathJax Version: 3 (Official Live Demo) Client OS: Windows 10 Browser: Chrome 104.0.5112.81

Works fine on Firefox.

conql avatar Aug 13 '22 14:08 conql

Sorry to necro this, but the information here has helped me fix a similar issue.

I'm working with math on Obsidian MD, a notetaking app. It offers markdown and mathblocks using latex code (not sure of the detail, but presumably also this repo).

Here is the problem I had: image Which looks like actual garbage. This was unusual since when I had written this note, it looked fine. After finding this issue though, I remembered I had zoomed out earlier, zooming back in caused the cases brackets to go back to normal: image

Code:

$$
\begin{align*}\\ 
\text{General (ditributed load): }M = \int_{A}\mu_{s}p_{(r)} \mathrm{d}A
\begin{cases}
\mathrm{d}A = \int_{\theta} \mathrm{d}\theta \int_{r}r \mathrm{d}r\\
\mathrm{d}F=\mu_{s}p \mathrm{d}A
    \begin{cases}
        p = P/A \text{ (may be func)} \\
        \mathrm{d}F=\mu_{s} \mathrm{d}N \\
        \mathrm{d}N=p \mathrm{d}A
            \begin{cases}
                N = P \\
                P = pA
            \end{cases}
    \end{cases} \\
M = \int_{A}r \mathrm{d}F \Leftrightarrow M = Fr\cos\theta
\end{cases}\\
\end{align*}
$$

Windows 11 Home, Obsidian MD both up to date with latest public stable release as of posting this. I'm posting this in case others encounter the same problem to confirm that, yes, it seems to be a zoom thing.

FAChenier avatar Sep 10 '23 15:09 FAChenier