Chrome突然停止接受insertRule()

Question

我有一个HTML5游戏,已经运行了好几个星期.

突然,大约一个小时前,它将不再在Chrome中运行.我将问题缩小到仅在Chrome中出现的JavaScript错误.

我在这里已经隔离了代码:http: //jsfiddle.net/quM3L/

......错误发生在第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);
}

...在Firefox,Internet Explorer,Safari等中运行良好

直到一小时前它在Chrome中运行良好.(在多台计算机上测试过.)

有没有人知道如何解决这个问题？我想,Chrome今天必须更新他们的JS引擎,不支持CSSStyleSHeet.insertRule().

在此先感谢您的帮助.

(原始游戏位于此处. 正如您所看到的,它可以在Chrome以外的所有浏览器中正常运行.)

Answer 1

所以,显然,Chrome正在落入第一个if语句(W3C)而不是第三个(Webkit).因此,他们必须刚刚更新他们的引擎能有今天既CSSRule.KEYFRAMES_RULE 和 CSSRule.WEBKIT_KEYFRAMES_RULE(感谢Ithcy).太痛苦了.

重新排序if语句,代码运行正常(小提琴):

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

这不好,因为Chrome不接受@keyframes,但确实接受@-webkit-keyframes.所以为什么他们改变他们的引擎也包括CSSRule.KEYFRAMES_RULE在我之外.