animation fluide que dans Firefox 4

Question

Il semble que la configuration suivante sur jsFiddle ne fonctionne que lisse dans Firefox 4. http://jsfiddle.net/ynytc/39/

Im se demander pourquoi? Je pensais peut-être à cause de l'accélération matérielle dans Firefox 4, mais sans cela fonctionne encore lisse.

Alors peut-être que quelqu'un sait pourquoi?

edit: par rapport au chrome, safari, IE8

Answer 1

Vous animez sur une période de 10 secondes un changement de taille de seulement 20 pixels. Cela signifie qu'il n'y aura qu'un seul changement de dimension intégral toutes les 1/2 secondes, ce qui est exactement ce que je vois dans Chrome. La taille de l'image ne peut pas être définie sur des fractions d'un pixel (dans tous les navigateurs). Firefox 4 semble autoriser cela, cependant; c'est la seule chose que je peux imaginer de toute façon. Si vous modifiez votre violon like this, vous verrez que Chrome exécute l'animation aussi rapidement que vous le souhaitez, mais l'image ne change que lorsqu'il y a un changement entier dans la valeur de la propriété (largeur et hauteur).

Answer 2

Ceci est un effet secondaire intéressant que je n'avais pas rencontré auparavant.

Il semble que les autres navigateurs ne peuvent pas appliquer la mise à l'échelle du sous-pixels, vous n'avez donc que 20 pixels à diffuser en 10 secondes, ce qui donne un nombre de pixels supérieur à 2 images par seconde. La solution de contournement pour cela serait d'appliquer des transitions CSS (si vous n'avez pas besoin de prendre en charge IE).

Voir par exemple avec des transitions CSS ici: http://jsfiddle.net/nKfdB/