MathML support for IE/older browsers

mathml-support-for-crappy-browsers.js

(function (window) {
	"use strict"
	// TODO: should let people style mathml while mathjax gets loaded

	var d = window.document,
		ns = "http://www.w3.org/1998/Math/MathML", math = 'math',
		MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
		mfrac = d.createElementNS(ns, math).appendChild(d.createElementNS(ns, "mfrac")),
		div = d.createElement("div")

	mfrac.appendChild(d.createElementNS(ns, "mi")).appendChild(d.createTextNode("xx"))
	mfrac.appendChild(d.createElementNS(ns, "mi")).appendChild(d.createTextNode("yy"))

	div.style.position = "absolute"
	div.appendChild(mfrac)
	div = d.body.appendChild(div)
	var supportsMathML = div.offsetHeight > div.offsetWidth
	d.body.removeChild(div)

	if (supportsMathML) return

	// No native support for MathML, install a DOM observer and load MathJax when needed
	// to convert all MathML to SVG
	var nodeLists = [d.getElementsByTagName(math), d.getElementsByTagNameNS(ns, math)],
		loaded = false,
		loading = false

	function typeset() {
		function process(nodes) {
			window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, Array.prototype.slice.call(nodes, 0)])
		}

		try {
			nodeLists.forEach(process)
		} catch (ignored) {}
	}

	function handler() {
		if (loading) return
		if (!nodeLists[0].length && !nodeLists[1].length) return
		if (!loaded) {
			var head = d.getElementsByTagName("head")[0],
				script = d.createElement("script")

			script.type = "text/x-mathjax-config"
			script.appendChild(d.createTextNode('MathJax.Hub.Config({jax:["input/MathML","output/SVG"],extensions: ["mml2jax.js","MathMenu.js","MathZoom.js"]})'))
			head.appendChild(script)

			script = d.createElement("script")
			script.src = ('https:' === d.location.protocol ? 'https://c328740.ssl.cf1.rackcdn.com' : 'http://cdn.mathjax.org') + '/mathjax/latest/MathJax.js'
			script.onload = script.onreadystatechange = function() {
				loading = false
				if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
					loaded = true
					typeset()
				}
			}
			loading = true
			head.appendChild(script)
			return
		}
		typeset()
	}

	if (typeof MutationObserver === 'function')
		new MutationObserver(handler).observe(d,{childList:true, subtree:true})
	else
		d.addEventListener('DOMSubtreeModified', handler, false)
}(this))

To test dynamic insertions of MathML, try this:

var i=0;
function grrr() {
    var div = document.createElement('div')
    div.innerHTML = '<p>Dynamic matrix: <math display="inline"><mrow><mfrac><mn>587</mn><mn>30</mn></mfrac><mo>+</mo><mo>(</mo><mtable><mtr><mtd><mfrac><mn>587</mn><mn>30</mn></mfrac></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>34895</mn></mtd></mtr><mtr><mtd><mfrac><mn>587</mn><mn>30</mn></mfrac></mtd><mtd><mn>1</mn></mtd><mtd><mn>684</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>10598</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1589</mn></mtd><mtd><mfrac><mn>587</mn><mn>30</mn></mfrac></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>789</mn></mtd><mtd><mfrac><mn>587</mn><mn>30</mn></mfrac></mtd><mtd><mn>15698</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>'
    document.body.appendChild(div)
    if (++i < 20) setTimeout(grrr, 2000)
}
grrr()