Skip to content
This repository

Fix for HIERARCHY_REQUEST_ERR being thrown in Webkit-based browers. #47

Open
wants to merge 2 commits into from

5 participants

pnomolos becw H.P. Codecraft Anton Stoychev NOT_CHARSET
pnomolos

Prevents an error being thrown if an @import or @charset rule is at the top of stylesheet.

pnomolos Append -webkit-transform rules to end of stylesheet rather than first…
… to prevent error being thrown if and @import or @charset rule is at the top.
4352ebc
becw
becw commented July 19, 2012

I ran into this same issue, but this fix doesn't quite work for me (in Chrome 21). Adding the rule to the end of the stylesheet instead of next-to-last works, though:

document.styleSheets[0].insertRule(rule, document.styleSheets[0].cssRules.length);

activity-indicator/activity-indicator.js
@@ -147,7 +147,7 @@
147 147
 						rule += p1 + value + p2 + value; 
148 148
 					}
149 149
 					rule += '100% { -webkit-transform:rotate(100deg); }\n}';
150  
-					document.styleSheets[0].insertRule(rule);
  150
+					document.styleSheets[0].insertRule(rule, document.styleSheets[0].cssRules.length-1);
4
becw
becw added a note July 19, 2012

This doesn't work for me as written; adding the rule to the end of the CSSRuleList does work, though:

document.styleSheets[0].insertRule(rule, document.styleSheets[0].cssRules.length);

NOT_CHARSET
charset added a note July 20, 2012
becw
becw added a note July 20, 2012

@charset I guess it's because you've been "mentioned" in the bug description.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
H.P. Codecraft

Just ran into the same issue and fixed it by adding an empty <style>-Tag before my included CSS file so the rules get inserted there. Maybe it would be a possible fix to insert the rules in a new style tag instead of appending them?

pnomolos

Just updated to append a new stylesheet and use that for the webkit-animation rules :)

Anton Stoychev

Consider also the solution provided at #45. It worked for me with the latest chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Jul 02, 2012
pnomolos Append -webkit-transform rules to end of stylesheet rather than first…
… to prevent error being thrown if and @import or @charset rule is at the top.
4352ebc
Sep 28, 2012
pnomolos Add a new stylesheet for webkit animation rules b36991d
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 32 additions and 28 deletions. Show diff stats Hide diff stats

  1. 60  activity-indicator/activity-indicator.js
60  activity-indicator/activity-indicator.js
@@ -5,7 +5,7 @@
5 5
  * Licensed under the MIT license
6 6
  *
7 7
  * Author: Felix Gnass [fgnass at neteye dot de]
8  
- * Version: @{VERSION}
  8
+ * Version: 1.0.0
9 9
  */
10 10
  
11 11
 /**
@@ -76,8 +76,7 @@
76 76
 	/**
77 77
 	 * The default animation strategy does nothing as we expect an animated gif as fallback.
78 78
 	 */
79  
-	var animate = function() {
80  
-	};
  79
+	var animate = $.noop;
81 80
 	
82 81
 	/**
83 82
 	 * Utility function to create elements in the SVG namespace.
@@ -128,33 +127,41 @@
128 127
 				
129 128
 		// Check if Webkit CSS animations are available, as they work much better on the iPad
130 129
 		// than setTimeout() based animations.
131  
-		
132 130
 		if (document.createElement('div').style.WebkitAnimationName !== undefined) {
133  
-
134 131
 			var animations = {};
135  
-		
  132
+			$('<style id="jquery_activity_indicator_style_sheet">').appendTo($('head:first')).get(0);
  133
+			var styleSheet = null;
  134
+			for (var i = document.styleSheets.length - 1; i >=0; i--) {
  135
+				var ss = document.styleSheets[i];
  136
+				if (ss.ownerNode && ss.ownerNode.id == 'jquery_activity_indicator_style_sheet') {
  137
+					styleSheet = ss;
  138
+				}
  139
+			}
  140
+			
136 141
 			/**
137 142
 			 * Animation strategy that uses dynamically created CSS animation rules.
138 143
 			 */
139  
-			animate = function(el, steps, duration) {
140  
-				if (!animations[steps]) {
141  
-					var name = 'spin' + steps;
142  
-					var rule = '@-webkit-keyframes '+ name +' {';
143  
-					for (var i=0; i < steps; i++) {
144  
-						var p1 = Math.round(100000 / steps * i) / 1000;
145  
-						var p2 = Math.round(100000 / steps * (i+1) - 1) / 1000;
146  
-						var value = '% { -webkit-transform:rotate(' + Math.round(360 / steps * i) + 'deg); }\n';
147  
-						rule += p1 + value + p2 + value; 
  144
+			 if (styleSheet) {
  145
+				animate = function(el, steps, duration) {
  146
+					if (!animations[steps]) {
  147
+						var name = 'spin' + steps;
  148
+						var rule = '@-webkit-keyframes '+ name +' {';
  149
+						for (var i=0; i < steps; i++) {
  150
+							var p1 = Math.round(100000 / steps * i) / 1000;
  151
+							var p2 = Math.round(100000 / steps * (i+1) - 1) / 1000;
  152
+							var value = '% { -webkit-transform:rotate(' + Math.round(360 / steps * i) + 'deg); }\n';
  153
+							rule += p1 + value + p2 + value; 
  154
+						}
  155
+						rule += '100% { -webkit-transform:rotate(100deg); }\n}';
  156
+						styleSheet.insertRule(rule, styleSheet.cssRules.length);
  157
+						animations[steps] = name;
148 158
 					}
149  
-					rule += '100% { -webkit-transform:rotate(100deg); }\n}';
150  
-					document.styleSheets[0].insertRule(rule);
151  
-					animations[steps] = name;
152  
-				}
153  
-				el.css('-webkit-animation', animations[steps] + ' ' + duration +'s linear infinite');
154  
-			};
  159
+					el.css('-webkit-animation', animations[steps] + ' ' + duration +'s linear infinite');
  160
+				};
  161
+			}
155 162
 		}
156  
-		else {
157  
-		
  163
+		// It wasn't set using the webkit animation methods
  164
+		if (animate == $.noop) {
158 165
 			/**
159 166
 			 * Animation strategy that transforms a SVG element using setInterval().
160 167
 			 */
@@ -174,10 +181,8 @@
174 181
 		// VML Rendering
175 182
 		// =======================================================================================
176 183
 		
177  
-		var s = $('<shape>').css('behavior', 'url(#default#VML)');
178  
-
179  
-		$('body').append(s);
180  
-
  184
+		var s = $('<shape>').css('behavior', 'url(#default#VML)').appendTo('body');
  185
+			
181 186
 		if (s.get(0).adj) {
182 187
 		
183 188
 			// VML support detected. Insert CSS rules for group, shape and stroke.
@@ -220,5 +225,4 @@
220 225
 		}
221 226
 		$(s).remove();
222 227
 	}
223  
-
224 228
 })(jQuery);
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.