Chrome在尝试从Javascript修改CSS3动画时崩溃

Chrome crashes when trying to modify CSS3 animation from Javascript

本文关键字：CSS3 动画 崩溃 修改 Javascript Chrome      更新时间：2024-04-11

我有一个HTML文件，其中包含：

<div id="container"></div>

我有一个样式表，其中定义了CSS3动画：

.image {
    position: absolute;
    -webkit-animation-name: image-create;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes image-create {
    from {
        width: 0px;
        height: 0px;
    }
    to {
        width: 500px;
        height: 500px;
    }
}

这将使图像从0x0增长到500x500。在我的Javascript文件中，我有以下内容：

var findAnimation = function(name) {
    for (var i in document.styleSheets) {
        var styleSheet = document.styleSheets[i];
        for (var j in styleSheet.cssRules) {
            var rule = styleSheet.cssRules[j];
            if (rule.type === 7 && rule.name == name) {
                return rule;
            }
        }
    }
    return null;
}
var addImage = function(x, y, src) {
    var image = new Image();
    image.src = src;
    image.className = "image";
    image.style.width = "500px";
    image.style.height = "500px";
    image.style.left = x;
    image.style.top = y;
    image.onload = function() {
        document.getElementById("container").appendChild(image);
        var animation = findAnimation("image-create");
        for (var i in animation.cssRules) {
            var rule = animation.cssRules[i];
            if (rule.keyText == "0%") {
                rule.style.top = y;
                rule.style.left = x;
            }
            if (rule.keyText == "100%") {
                rule.style.top = 0;
                rule.style.left = 0;
            }
        }
    }
}
addImage(100, 100, "http://i.imgur.com/KGfgH.jpg");

​

当调用addImage（）时，我试图在坐标（x，y）处创建一个图像。动画应该使其增长，同时也从创建图像的位置（x，y）移动到左上角（0，0）。

相反，Chrome只是崩溃到"哇，啪"的页面。有人知道为什么会这样吗？

编辑：这是一个例子。如果我访问它，它会崩溃：http://jsfiddle.net/LVpWS/10/

在这篇文章中，我评论了一些行，它没有崩溃：http://jsfiddle.net/LVpWS/21/

第二版：如果我切换回Chrome 20，它会起作用。

我已经隔离了错误：
当向WebKitCSSKeyframeRule实例添加新属性时，页面崩溃（Aw，snap）。使用以下代码可以在Chrome 21.0.1180.57中重现该错误：http://jsfiddle.net/LVpWS/68/

<style id="sheet">
@-webkit-keyframes test {
    from {}
}</style><script>
var keyFramesRule = document.getElementById('sheet').sheet.cssRules[0];
var keyFrameRule = keyFramesRule[0];
keyFrameRule.style.top = 0;</script>

当该属性已存在于规则中时，不会发生此崩溃。将from {}替换为from{top:1px;}，以检查：http://jsfiddle.net/LVpWS/69/.

相关文章：