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,10 +2,8 @@
  * 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.
@@ -16,11 +14,7 @@
     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.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'