diff --git a/public/app/app.ts b/public/app/app.ts
index 13782b275a5..59f95f00e86 100644
--- a/public/app/app.ts
+++ b/public/app/app.ts
@@ -4,6 +4,7 @@ import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
+import './polyfills/old-mediaquerylist'; // Safari < 14 does not have mql.addEventListener()
 import 'file-saver';
 import 'jquery';
 
diff --git a/public/app/polyfills/old-mediaquerylist.ts b/public/app/polyfills/old-mediaquerylist.ts
new file mode 100644
index 00000000000..15f04a6eded
--- /dev/null
+++ b/public/app/polyfills/old-mediaquerylist.ts
@@ -0,0 +1,20 @@
+// Safari < 14 does not have mql.addEventListener(), but uses the old spec mql.addListener()
+
+let oMatchMedia = window.matchMedia;
+
+type MqlListener = (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+
+window.matchMedia = (mediaQueryString) => {
+  let mql = oMatchMedia(mediaQueryString);
+
+  if (!mql.addEventListener) {
+    mql.addEventListener = (type: string, listener: MqlListener) => {
+      mql.addListener(listener);
+    };
+    mql.removeEventListener = (type: string, listener: MqlListener) => {
+      mql.removeListener(listener);
+    };
+  }
+
+  return mql;
+};