MathJax Straight lines of \vmatrix{} doesn't show up on Firefox

Steps to reproduce

Open https://www.mathebibel.de/inverse-matrix-berechnen-mit-adjunkte#beispiel-1 with Firefox 89 or 90 beta (tested on macOS Big Sur, Windows 10 and Linux Mint 19)
Look at the math content below (1) Determinante berechnen: The straight lines of the \vmatrix are missing.

With Chrome, Edge and Safari everything works fine.

EDIT: I tested Firefox 88 and below and there it works. Please check the release notes of Firefox 89. Maybe you can identify the bug.

Working example

I was surprised that the following works even on Firefox 89+:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 with TeX input and HTML output</title>
  <script>
  MathJax = {
    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
    chtml: {displayAlign: 'left'}
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
    <h1>Testing...</h1>

    <h2>...pmatrix</h2>

    <p>
      \(
      A
      = \begin{pmatrix}
      4 & 3 \\
      5 & 7
      \end{pmatrix}
      \)
    </p>

    <h2>...vmatrix</h2>

    <p>
      \(
      A
      = \begin{vmatrix}
      4 & 3 \\
      5 & 7
      \end{vmatrix}
      \)
    </p>

</body>
</html>

Jul 03 '21 16:07 Mathebibel

It looks like Firefox on linux mint is having difficulty with scaling the extenders again. At some zoom levels, it looks like round-off errors may be causing the thin vertical lines to disappear. Try adding

  mjx-stretchy-v.mjx-c7C > mjx-ext > mjx-c {
    transform: scale(1.5, 500) translate(-.13em, .075em);
  }

to the CSS on your page and see if that helps. It is still possible for the lines to disappear at small scales, but at least it seems to work better for most zoom levels.

Jul 05 '21 11:07 dpvc

With your solution the right line is too near to the content of the determinant.

The following does the job (for my case)

mjx-stretchy-v.mjx-c7C > mjx-ext > mjx-c {
	transform: scaley(500);
}

Jul 05 '21 16:07 Mathebibel

Does that work if you zoom in or out? Particularly, does it work at small sizes?

Jul 05 '21 16:07 dpvc

PS, that didn't work for me in a test file that I was working with (I couldn't do it with your page, as whatever it is doing slowed down my VM to a crawl and I had to shut down the VM entirely). So while this may work for your particular page, it may not be a general solution. I eyeballed the x-translation, so should do the math to figure out exactly what it should be.

Jul 05 '21 16:07 dpvc

You're right. My solution is not a general solution. It doesn't work for all sizes (90 % doesn't work, 80 % does work and so on...it seems to be a round-off error like you said).

Jul 06 '21 08:07 Mathebibel

See also: https://github.com/mathjax/MathJax/issues/2741

I wonder if this is the twin of the problem with horizontal extenders. https://github.com/mathjax/MathJax/issues/2795

That was acknowledges to be a bug in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1741887 but it does not seem to be something which is high enough a priority for them to fix soon.

Mar 31 '22 14:03 taniwallach