Библиотека 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;
}