How to solve mhchem/MathJax rendering problems

Question

Edit: This is not a bug, it is a feature, see my answer post.

While recently directing a new user to this meta post about formatting using MathJax, I noticed that some components were not rendering correctly.

For example, The bond between $\ce{E}$ and $\ce{F}$ is typeset very strangely. $$\ce{H\bond{->}A-B=C#D\bond{~}E\bond{~-}F\bond{...}G\bond{<-}E}$$

In the next example, the equilibrium arrows are broken, and the subscripts are placed too low: $$\ce{H2O + HCl<=>H3O+ + Cl-}$$

Here is an image for reference once the problem is fixed:

The issue appears to only be for rendering certain items using the mhchem environment, and it is only on meta. Rendering works fine on main, see image:

Answer 1

So, after failing to reproduce the problem in another browser, I have discovered my own answer. I want to leave this here for other folks who encounter this issue.

The problem is in how you tell your browser to render MathJax.

If you right-click on some maths, you will see the MathJax settings menu. Under Math Settings > Math Renderer you can change how your browser renders MathJax.

Here is a graphical breakdown of three of the options. HTML-CSS works best for me, as it renders properly, and I can select the text. Fast HTML renders mhchem poorly (but works okay on other maths), but still allows the text to be selected. SVG renders very well, but you cannot select it. MathML requires a plugin that I see no need to install since one of the other options works.

Chrome appears to attach these settings to things it remembers about individual sites, which is why mhchem rendered well on main and poorly on meta.