MathJax is suddenly breaking lines

Question

I'm using MathJax in Anki to make notes. When I use "Cloze" note type and put some MathJax in cloze deletion, the lines are suddenly broken, but outside cloze deletion MathJax renders as expected. Here is an example 1. My front template:

{{cloze:Text}}
<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
  messageStyle: 'none',
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
    processEscapes: true
  },
  SVG: {
    scale: (!!navigator.userAgent.match(/(mac)|(mobile)/i) ? 100 : 180)
  }
});
</script>

<script type="text/javascript">
(function() {
  if (window.MathJax != null) {
    var card = document.querySelector('.card');
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
    return;
  }
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
  document.body.appendChild(script);
})();
    </script>

And styling:

.card {
 font-family: calibri;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: lightgray;
}

.cloze {
 font-weight: bold;
 color: blue;
}

How to fix this problem?

Answer 1

If you are using a WebKit-based browser (e.g., Safari or Chrome), then recent changes in WebKit may be the cause of your issue. The way MathJax checked for the available width for the math now causes unwanted line breaks in WebKit. (See this issue in the MathJax issue tracker.)

This was fixed in version 2.7.5, so you should upgrade to that. You are currently using 2.7.1, so changing

  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';

to

  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_SVG';

will do it. Changing it to

  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_SVG';

will make sure you have the most current (2.x) version automatically (i.e., even though you are calling from 2.7.5, if there is an update to 2.7.6, you will be switched to that automatically).