Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
wants to merge 2 commits into from

5 participants

@pnomolos

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

@pnomolos 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

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 @@
rule += p1 + value + p2 + value;
}
rule += '100% { -webkit-transform:rotate(100deg); }\n}';
- document.styleSheets[0].insertRule(rule);
+ document.styleSheets[0].insertRule(rule, document.styleSheets[0].cssRules.length-1);
@becw
becw added a note

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);

@charset
charset added a note
@becw
becw added a note

@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
@hpcodecraft

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 :)

@antitoxic

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
Commits on Jul 2, 2012
  1. @pnomolos

    Append -webkit-transform rules to end of stylesheet rather than first…

    pnomolos authored
    … to prevent error being thrown if and @import or @charset rule is at the top.
Commits on Sep 28, 2012
  1. @pnomolos
This page is out of date. Refresh to see the latest.
Showing with 32 additions and 28 deletions.
  1. +32 −28 activity-indicator/activity-indicator.js
View
60 activity-indicator/activity-indicator.js
@@ -5,7 +5,7 @@
* Licensed under the MIT license
*
* Author: Felix Gnass [fgnass at neteye dot de]
- * Version: @{VERSION}
+ * Version: 1.0.0
*/
/**
@@ -76,8 +76,7 @@
/**
* The default animation strategy does nothing as we expect an animated gif as fallback.
*/
- var animate = function() {
- };
+ var animate = $.noop;
/**
* Utility function to create elements in the SVG namespace.
@@ -128,33 +127,41 @@
// Check if Webkit CSS animations are available, as they work much better on the iPad
// than setTimeout() based animations.
-
if (document.createElement('div').style.WebkitAnimationName !== undefined) {
-
var animations = {};
-
+ $('<style id="jquery_activity_indicator_style_sheet">').appendTo($('head:first')).get(0);
+ var styleSheet = null;
+ for (var i = document.styleSheets.length - 1; i >=0; i--) {
+ var ss = document.styleSheets[i];
+ if (ss.ownerNode && ss.ownerNode.id == 'jquery_activity_indicator_style_sheet') {
+ styleSheet = ss;
+ }
+ }
+
/**
* Animation strategy that uses dynamically created CSS animation rules.
*/
- animate = function(el, steps, duration) {
- if (!animations[steps]) {
- var name = 'spin' + steps;
- var rule = '@-webkit-keyframes '+ name +' {';
- for (var i=0; i < steps; i++) {
- var p1 = Math.round(100000 / steps * i) / 1000;
- var p2 = Math.round(100000 / steps * (i+1) - 1) / 1000;
- var value = '% { -webkit-transform:rotate(' + Math.round(360 / steps * i) + 'deg); }\n';
- rule += p1 + value + p2 + value;
+ if (styleSheet) {
+ animate = function(el, steps, duration) {
+ if (!animations[steps]) {
+ var name = 'spin' + steps;
+ var rule = '@-webkit-keyframes '+ name +' {';
+ for (var i=0; i < steps; i++) {
+ var p1 = Math.round(100000 / steps * i) / 1000;
+ var p2 = Math.round(100000 / steps * (i+1) - 1) / 1000;
+ var value = '% { -webkit-transform:rotate(' + Math.round(360 / steps * i) + 'deg); }\n';
+ rule += p1 + value + p2 + value;
+ }
+ rule += '100% { -webkit-transform:rotate(100deg); }\n}';
+ styleSheet.insertRule(rule, styleSheet.cssRules.length);
+ animations[steps] = name;
}
- rule += '100% { -webkit-transform:rotate(100deg); }\n}';
- document.styleSheets[0].insertRule(rule);
- animations[steps] = name;
- }
- el.css('-webkit-animation', animations[steps] + ' ' + duration +'s linear infinite');
- };
+ el.css('-webkit-animation', animations[steps] + ' ' + duration +'s linear infinite');
+ };
+ }
}
- else {
-
+ // It wasn't set using the webkit animation methods
+ if (animate == $.noop) {
/**
* Animation strategy that transforms a SVG element using setInterval().
*/
@@ -174,10 +181,8 @@
// VML Rendering
// =======================================================================================
- var s = $('<shape>').css('behavior', 'url(#default#VML)');
-
- $('body').append(s);
-
+ var s = $('<shape>').css('behavior', 'url(#default#VML)').appendTo('body');
+
if (s.get(0).adj) {
// VML support detected. Insert CSS rules for group, shape and stroke.
@@ -220,5 +225,4 @@
}
$(s).remove();
}
-
})(jQuery);
Something went wrong with that request. Please try again.