plante Chrome lorsque vous essayez de modifier l'animation CSS3 de Javascript

Question

je un fichier HTML avec ceci:

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

et j'ai une feuille de style avec une animation CSS3 définie:

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

Cela devrait faire une l'image passe de 0x0 à 500x500. Dans mon fichier Javascript je donne les résultats suivants:

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

Quand est appelé addImage(), je suis en train de créer une image aux coordonnées (x, y). L'animation devrait la faire grandir tout en bougeant de l'endroit où l'image a été créée (x, y) jusqu'au coin supérieur gauche (0, 0). À la place, Chrome se bloque simplement sur la page "Aw, snap". Est-ce que quelqu'un sait pourquoi c'est le cas?

EDIT: Voici un exemple. Cette plante pour moi si je visite: http://jsfiddle.net/LVpWS/10/

Dans celui-ci, je commenté quelques lignes et il n'a pas l'accident: http://jsfiddle.net/LVpWS/21/

EDIT2: Il fonctionne si je reviens au chrome 20.

Answer 1

I avez isolé l'erreur:
La page se bloque (Aw, snap) lorsqu'une nouvelle propriété est ajoutée à une instance WebKitCSSKeyframeRule. Le bug peut être reproduit dans Chrome 21.0.1180.57 en utilisant le code suivant: 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> 

Cet accident ne se produit pas lorsque la propriété existe déjà dans la règle. Remplacez from {} par from{top:1px;} pour vérifier cela: http://jsfiddle.net/LVpWS/69/.