0

私はこれを含む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");

</ p>

addImage（）が呼び出されると、座標（x、y）に画像を作成しようとしています。アニメーションは、画像が作成された場所（x、y）から左上隅（0、0）に移動しながら、成長させる必要があります。

代わりに、Chromeは「Aw、snap」ページにクラッシュします。なぜこれが当てはまるのか誰かが知っていますか？

編集：ここに例があります。http://jsfiddle.net/LVpWS/10/にアクセスすると、クラッシュします。

これで私はいくつかの行をコメントアウトしました、そしてそれはクラッシュしません：http: //jsfiddle.net/LVpWS/21/

EDIT2：Chrome20に戻すと機能します。

4

1 に答える 1

2

エラーを特定しました:新しいプロパティがインスタンス
に追加されると、ページがクラッシュします (ああ、スナップ) 。WebKitCSSKeyframeRuleこのバグは、次のコードを使用して 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/に置き換えます。

于 2012-08-01T08:34:38.710 に答える