LaTeX Not Rendering/Renders Inconsistently

[Valerie Sun]

Hey everyone :)

I'm making a math website, but I'm having a problem (for the first time in roughly 6 months of using MathJax) in which some of my LaTeX does not render. This problem is inconsistent—only sometimes does MathJax correctly render my LaTeX. Other times, however, MathJax does not render some code, leaving blank space. Usually, zooming into/out of the page fixes the issue. I know that the issue is not server-side, as I also experience it locally. I have uploaded a simplified version of one of my pages that exhibits this behavior (it can be found here , and its code can be found here .) I notice that this problem occurs in Google Chrome and Opera but not in Microsoft Edge or Internet Explorer (I hypothesize that this is because those browsers zoom the page out.) I've also tried clearing my cache, re-uploading the code, and restarting my browsers but haven't had any success. I've attached two images below that show the inconsistencies in the rendering. Additionally, I've tried moving the MathJax scripts in the HTML to be above the head, in the head, and after the body, but the location did not solve anything. If anyone has any ideas on what is causing this problem and how I can remedy it, please reply below. Thank you so much!

[Valerie Sun]

Update—I may have found a fix. 

I changed 

"<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mat...@3.01/es5/tex-mml-chtml.js"></script>"

to 

"<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>".