From 12ce43b8ccb4d75eb729693b4f38c12ee808bb8e Mon Sep 17 00:00:00 2001
From: Julian Wielga <j@touk.pl>
Date: Tue, 17 Mar 2015 16:40:55 +0100
Subject: [PATCH 1/3] fix for safari

styleString was too big for safari to parse when appending with
innerHTML
---
 src/core/services/theming/theming.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js
index e9869c2bbe7..e65d9ade3fc 100644
--- a/src/core/services/theming/theming.js
+++ b/src/core/services/theming/theming.js
@@ -453,24 +453,24 @@ function generateThemes($injector) {
   // For each theme, use the color palettes specified for `primary`, `warn` and `accent`
   // to generate CSS rules.
   angular.forEach(THEMES, function(theme) {
-    THEME_COLOR_TYPES.forEach(function(colorType) {
-      styleString += parseRules(theme, colorType, rulesByType[colorType] + '');
-    });
+      // Insert our newly minted styles into the DOM
+    if (!generationIsDone) {
+      THEME_COLOR_TYPES.forEach(function(colorType) {
+        styleString = parseRules(theme, colorType, rulesByType[colorType] + '');
+        var style = document.createElement('style');
+        style.innerHTML = styleString;
+        var head = document.getElementsByTagName('head')[0];
+        head.insertBefore(style, head.firstElementChild);
+      });
+      generationIsDone = true;
+    }
+
     if (theme.colors.primary.name == theme.colors.accent.name) {
       console.warn("$mdThemingProvider: Using the same palette for primary and" +
                    " accent. This violates the material design spec.");
     }
   });
 
-  // Insert our newly minted styles into the DOM
-  if (!generationIsDone) {
-    var style = document.createElement('style');
-    style.innerHTML = styleString;
-    var head = document.getElementsByTagName('head')[0];
-    head.insertBefore(style, head.firstElementChild);
-    generationIsDone = true;
-  }
-
   // The user specifies a 'default' contrast color as either light or dark,
   // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light)
   function sanitizePalette(palette) {

From 4572e80a20cbe8bb5d3415a9ffb0fde8150ff084 Mon Sep 17 00:00:00 2001
From: Julian Wielga <j@touk.pl>
Date: Tue, 17 Mar 2015 18:39:32 +0100
Subject: [PATCH 2/3] grid list in safari, fixed typo

breaks grid list in safari
---
 src/components/gridList/gridList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/gridList/gridList.js b/src/components/gridList/gridList.js
index 2f27aeedeae..9617bc0e6c3 100644
--- a/src/components/gridList/gridList.js
+++ b/src/components/gridList/gridList.js
@@ -204,7 +204,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
     // The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
     // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
     // row/column (offset).
-    var POSITION  = $interpolate('calc( ( ({{unit}}) + {{gutter}} ) * {{offset}} ');
+    var POSITION  = $interpolate('calc( ( {{unit}} + {{gutter}} ) * {{offset}} )');
 
     // The actual size of a tile, e.g., width or height, taking rowSpan or colSpan into account.
     // This is computed by multiplying the base unit by the rowSpan/colSpan, and then adding back

From be8c1ad2acaa8139a24b1b804adcdf14753b0789 Mon Sep 17 00:00:00 2001
From: Julian Wielga <j@touk.pl>
Date: Sat, 28 Mar 2015 21:25:57 +0100
Subject: [PATCH 3/3] another, better fix for safari

safari has problem with too long <style> body
---
 src/core/services/theming/theming.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js
index e65d9ade3fc..add3879290a 100644
--- a/src/core/services/theming/theming.js
+++ b/src/core/services/theming/theming.js
@@ -360,7 +360,7 @@ function ThemableDirective($mdTheming) {
   return $mdTheming;
 }
 
-function parseRules(theme, colorType, rules) {
+function _parseRules(theme, colorType, rules) {
   checkValidPalette(theme, colorType);
 
   rules = rules.replace(/THEME_NAME/g, theme.name);
@@ -402,7 +402,11 @@ function parseRules(theme, colorType, rules) {
     generatedRules.push(newRule);
   });
 
-  return generatedRules.join('');
+  return generatedRules;
+}
+
+function parseRules(theme, colorType, rules) {
+  return _parseRules(theme, colorType, rules).join('');
 }
 
 // Generate our themes at run time given the state of THEMES and PALETTES
@@ -448,19 +452,20 @@ function generateThemes($injector) {
     return rulesByType[DEFAULT_COLOR_TYPE] += rule;
   });
 
-  var styleString = '';
-
   // For each theme, use the color palettes specified for `primary`, `warn` and `accent`
   // to generate CSS rules.
   angular.forEach(THEMES, function(theme) {
       // Insert our newly minted styles into the DOM
     if (!generationIsDone) {
+      var head = document.getElementsByTagName('head')[0];
       THEME_COLOR_TYPES.forEach(function(colorType) {
-        styleString = parseRules(theme, colorType, rulesByType[colorType] + '');
-        var style = document.createElement('style');
-        style.innerHTML = styleString;
-        var head = document.getElementsByTagName('head')[0];
-        head.insertBefore(style, head.firstElementChild);
+        var styleString = _parseRules(theme, colorType, rulesByType[colorType]);
+        while(styleString.length) {
+          var style = document.createElement('style');
+          style.setAttribute('type', 'text/css');
+          style.appendChild(document.createTextNode(styleString.shift()));
+          head.appendChild(style);
+        }
       });
       generationIsDone = true;
     }