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()。

提前感谢您的帮助。

（The original game is located here.正如您所看到的，它可以在Chrome以外的所有浏览器中正常运行。）

Answer 1

所以，显然，Chrome正在落入第一个if语句（W3C）而不是第三个（Webkit）。因此，他们必须立即更新他们的引擎以同时拥有CSSRule.KEYFRAMES_RULE 和 CSSRule.WEBKIT_KEYFRAMES_RULE（感谢Ithcy）。多么痛苦。

重新排序if语句，代码运行良好(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);
}

这不太好，因为Chrome不接受@keyframes，但它接受@-webkit-keyframes。那么为什么他们将引擎改为包括CSSRule.KEYFRAMES_RULE也超出了我的范围。

Answer 2

CSSStyleSHeet.insertRule()仍受支持，因为您会看到是否尝试插入像"body { color: blue; }"这样的简单内容。这是@keyframes的事情。请改为@-webkit-keyframes。

Chrome突然停止接受insertRule（）

2 个答案: