some inline math has top half cut off on mobile only

[tholdem]

Issue Summary

All display is correct on desktop, but on mobile (iOS 13.6 Firefox Focus Browser and Safari) some inline math (mostly intervals that look like $[a,b]$ has the top half cutoff, which looks like this

But not all intervals experience this bug. I don't know why only a few experience this.

Technical details:

• MathJax Version: 3 from this tutorial https://geoffruddock.com/math-typesetting-in-hugo/
• Client OS: iOS 13.6
• Browser: Firefox Focus Browser and Safari latest

Supporting information:

Please see this webpage on mobile. Some intervals are cutoff
https://www.jadenmath.com/posts/extension_theorem/
Code is the same as https://geoffruddock.com/math-typesetting-in-hugo/

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$','$$'], ['\\[', '\\]']],
      processEscapes: true,
      processEnvironments: true
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
    }
  };

  window.addEventListener('load', (event) => {
      document.querySelectorAll("mjx-container").forEach(function(x){
        x.parentElement.classList += 'has-jax'})
    });

</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

code.has-jax {
	font: inherit;
    -webkit-font-smoothing: antialiased;
    background: inherit !important;
    border: inherit !important;
    font-size: 100%;
	color: #515151;
}

[pkra]

Probably a duplicate of #2435.

[dpvc]

Closing as a duplicate.