I have an HTML5 game that has been running beautifully for weeks.

Suddenly, about an hour ago, it will no longer run in Chrome. I narrowed the issue down to a JavaScript error that occurs only in Chrome.

I have isolated said code here: /

...the error is produced on line 4:

var style = document.documentElement.appendChild(document.createElement("style"));
var rule =  "score_10_typing {from {width: 0} to {width: 11em}}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule, 0);
}
else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}

...that runs just fine in Firefox, Internet Explorer, Safari, etc.

It ran fine in Chrome until an hour ago. (Tested on multiple puters.)

Does anyone have an idea of how to perhaps get around this? Chrome must have just today updated their JS engine to not support CSSStyleSHeet.insertRule(), I suppose.

Thanks in advance for any help.

(The original game is located here. As you can see, it runs fine in all browsers other than Chrome.)

I have an HTML5 game that has been running beautifully for weeks.

Suddenly, about an hour ago, it will no longer run in Chrome. I narrowed the issue down to a JavaScript error that occurs only in Chrome.

I have isolated said code here: http://jsfiddle/quM3L/

...the error is produced on line 4:

var style = document.documentElement.appendChild(document.createElement("style"));
var rule =  "score_10_typing {from {width: 0} to {width: 11em}}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule, 0);
}
else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}

...that runs just fine in Firefox, Internet Explorer, Safari, etc.

It ran fine in Chrome until an hour ago. (Tested on multiple puters.)

Does anyone have an idea of how to perhaps get around this? Chrome must have just today updated their JS engine to not support CSSStyleSHeet.insertRule(), I suppose.

Thanks in advance for any help.

(The original game is located here. As you can see, it runs fine in all browsers other than Chrome.)

• javascript
• html
• css
• google-chrome

• 3 If it happened an hour ago, we're probably as wise as you. – Robert Harvey Commented Nov 15, 2013 at 18:24
• 2 @RobertHarvey Fair enough. A guy can hope, though, right? :) Also, I wanted to post this in case anyone else searches for the issue - so they can see they're not alone. – Leng Commented Nov 15, 2013 at 18:25
• 1 Coders are never alone. We stand together on the shoulders of giants. Also, we all go to the same conventions... – QuestionMarcs Commented Nov 15, 2013 at 18:31
• 1 Thanx Leng, I am the author of the original code (arcadejhs.github.io/HTML5-Space-Invaders): I quickly solved the issue thanks to your question :-D – Matteo Piazza Commented Nov 20, 2013 at 22:16
• @Matteo Hey again Matteo! This is Jacob, we exchanged a couple emails and you pulled my bug fix for the aliens getting stuck on the side of the screen. Awesome! I was going to submit another pull request, but looks like you beat me to it. Haha, good work. :) – Leng Commented Nov 20, 2013 at 22:37

2 Answers 2

So, evidently, Chrome was falling into the first if statement (W3C) instead of into the 3rd (Webkit). So, they must have just updated their engine today to have both CSSRule.KEYFRAMES_RULE and CSSRule.WEBKIT_KEYFRAMES_RULE (thanks Ithcy). What a pain.

Reorder the if statement, and the code runs fine (fiddle):

var style = document.documentElement.appendChild(document.createElement("style"));
var rule =  "score_10_typing {from {width: 0} to {width: 11em}}";
if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}
else if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule, 0);
}

This is not good, because Chrome doesn't accept @keyframes, but it does accept @-webkit-keyframes. So why they have changed their engine to also include CSSRule.KEYFRAMES_RULE is beyond me.

CSSStyleSHeet.insertRule() is still supported, as you'll see if you try to insert something simple like "body { color: blue; }". It's the @keyframes thing. Try @-webkit-keyframes instead.