Load MathML polyfill stylesheet only when needed

assets/javascripts/app/config.coffee.erb

@@ -12,3 +12,4 @@ app.config =
   sentry_dsn: '<%= App.sentry_dsn %>'
   version: <%= Time.now.to_i %>
   release: <%= Time.now.utc.httpdate.to_json %>
+  mathml_stylesheet: 'https://cdn.devdocs.io/mathml.css'

assets/javascripts/vendor/mathml.js

@@ -2,25 +2,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  * Adapted from: https://github.com/fred-wang/mathml.css */
-/*jslint browser: true*/
 
 (function () {
-    "use strict";
-    window.addEventListener("load", function () {
-        var box, div, link, namespaceURI;
-        // First check whether the page contains any <math> element.
-        namespaceURI = "http://www.w3.org/1998/Math/MathML";
-        // Create a div to test mspace, using Kuma's "offscreen" CSS
-        document.body.insertAdjacentHTML("afterbegin", "<div style='border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;'><math xmlns='" + namespaceURI + "'><mspace height='23px' width='77px'></mspace></math></div>");
-        div = document.body.firstChild;
-        box = div.firstChild.firstChild.getBoundingClientRect();
-        document.body.removeChild(div);
-        if (Math.abs(box.height - 23) > 1  || Math.abs(box.width - 77) > 1) {
-            // Insert the mathml.css stylesheet.
-            link = document.createElement("link");
-            link.href = "https://cdn.devdocs.io/mathml.css";
-            link.rel = "stylesheet";
-            document.head.appendChild(link);
-        }
-    });
+  window.addEventListener("load", function() {
+    var box, div, link, namespaceURI;
+    // First check whether the page contains any <math> element.
+    namespaceURI = "http://www.w3.org/1998/Math/MathML";
+    // Create a div to test mspace, using Kuma's "offscreen" CSS
+    document.body.insertAdjacentHTML("afterbegin", "<div style='border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;'><math xmlns='" + namespaceURI + "'><mspace height='23px' width='77px'></mspace></math></div>");
+    div = document.body.firstChild;
+    box = div.firstChild.firstChild.getBoundingClientRect();
+    document.body.removeChild(div);
+    if (Math.abs(box.height - 23) > 1  || Math.abs(box.width - 77) > 1) {
+      window.supportsMathML = false;
+    }
+  });
 }());

assets/javascripts/views/content/entry_page.coffee

@@ -37,6 +37,7 @@ class app.views.EntryPage extends app.View
     if app.disabledDocs.findBy 'slug', @entry.doc.slug
       @hiddenView = new app.views.HiddenPage @el, @entry
 
+    @delay @polyfillMathML
     @trigger 'loaded'
     return
 
@@ -49,6 +50,12 @@ class app.views.EntryPage extends app.View
     el.appendChild(@clipBoardLink.cloneNode()) for el in @el.querySelectorAll('pre')
     return
 
+  polyfillMathML: ->
+    return unless window.supportsMathML is false and !@polyfilledMathML and @find('math')
+    @polyfilledMathML = true
+    $.append document.head, """<link rel="stylesheet" href="#{app.config.mathml_stylesheet}">"""
+    return
+
   LINKS =
     home: 'Homepage'
     code: 'Source code'