Библиотека MathJax, оставляя полосы прокрутки в формулах

Question

Я пытался использовать MathJax для создания некоторых математических инструментов, которые будут использоваться для моих уровней A, в настоящее время я делаю страницу для квадратиков и небольшой калькулятор для корней квадратного уравнения.

Моя проблема возникает, когда я пытался отобразить формулу с помощью MathJax, как вы можете видеть здесь ( http://www.lucapassariello.co.uk/mathsTools/quadratics), что отображается как беспорядок значков прокрутки, и когда правильный Формула действительно отображается в течение короткого промежутка времени, кажется, что все возносится как сила ничто.

Ниже приведена ссылка на библиотеку и скрипт конфигурации.

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
      });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

А вот и реализованный HTML квадратичной формулы.

<p>$$x=\frac{-b \pm \sqrt{b^2 -4ac}}{2a}$$</p>

Любая помощь очень ценится.

Answer 1

Предоставленный вами код работает как задумано, поэтому я предположил, что это должно быть что-то с вашим сайтом.

Если вы удалите overflow-x: hidden; из приведенного ниже кода в resources/public/css/style.css файл, то вы вернетесь к работе. Кажется, что это противоречит Mathjax css и отсечению элементов, которые отображаются в сценарии.

Если вам все еще нужно overflow-x: hidden тогда я предложил бы быть более избирательным с ним вместо того, чтобы использовать *

*{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}