Pourquoi mes animations jQuery agitée dans webkit, navigateurs?

Je travaille avec un très simple animation: pose d'une ligne d'images vers la gauche:

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

(C'est censé être une image de la galerie; je masquer le dépassement d'afficher une seule image à la fois).

De toute façon, malgré l'essai de divers assouplissement des paramètres, même à des vitesses lentes l'animation a été très agitée dans Chrome et Safari, mais toujours en douceur dans Internet Explorer et Firefox. (La plupart des questions soulevées en ligne sont sur IE ou Firefox être agitée!)

J'ai trouvé la cause, pour moi. C'est un cas très spécial qui ne sera probablement pas s'appliquer à la plupart, mais peut-être que ça va aider quelqu'un, peu importe. Je vais poster ma réponse ci-dessous. (Les lignes directrices du site le permettent, je pense.)

Oui, idéalement si/lorsque vous résoudre à votre propre question, vous le poster ci-dessous et "accepter", votre propre réponse... tant que c'est sur le sujet de ce site et a présenté suffisamment claire pour aider les futurs lecteurs. Ma seule suggestion serait que tu postes un exemple & code dans votre question ci-dessus pour lui donner plus de contexte.

OriginalL'auteur Andrew Cheong | 2011-12-17

  1. 12

    Pour moi, il n'a pas fait une différence si c'était de 24 bits Png, 8-bit, Png, Gif, Jpeg, etc., si il y avait une grande image sur l'écran, il y avait des problèmes avec mes animations. Si vous avez des éléments de z-index ed-dessus d'une grande image, essayez d'ajouter cette CSS de votre élément:

    -webkit-transform: translateZ(0);

    Pour moi, cela a fonctionné, mais il a quitté l'animation des artefacts.

    Ce que finalement résolu pour moi a été de modifier simplement ceci:

    $('#myimage').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

    :

    $('#myimage').animate({
    height: '-=1'
}, 1, 'linear').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

    J'ai juste ajouté une petite de 1 milliseconde d'animation sur le début. Ma pensée a été qu'il serait peut-être "se préparer" de google Chrome pour le véritable animation à venir, et cela a fonctionné. Vous pouvez le changer à 20 ou 50 millisecondes pour être sûr.

    -webkit-transform: translateZ(0); a fonctionné pour moi
    grâce Garvin. -webkit-transform: translateZ(0); a résolu mon problème. merci pour le partage de vraiment utile.
    +1, 9 mois sur -webkit-transform: translateZ(0); encore m'a aidé. Merci.

    OriginalL'auteur Gavin

  2. 7

    Dans mon cas, le problème n'était pas avec le code, mais avec les images, plus précisément, de grandes images qui ont été (par la force) mis à l'échelle vers le bas via la css largeur de la propriété. Bien sûr, plus d'images peut prendre plus de traitement pour animer, mais IE et FF semble gérer simplement à fine échelle (dans mon cas, les images 2000px de large, étaient mis à l'échelle pour être 800px de large). Pendant ce temps, il semble que Chrome et Safari de s'embourber dans l'animation de ces images. Une fois que j'lot-rétréci toutes mes images dans Photoshop pour fait être 800px de large, les animations ont été lisse partout.

    D'autres détails. J'utilise jQuery 1.7. J'ai rencontré le problème d'animation de l'élément img lui-même, ainsi que d'un élément div avec une image de fond.

    Super vieux thread, je sais, mais je vais avoir le même problème sur Chrome. Problème, c'est que mes images sont dynamiquement mise à l'échelle selon la taille de la fenêtre. Toutes les suggestions?

    OriginalL'auteur Andrew Cheong

  3. 1

    Je me rends compte de ce fil est vieux, mais dans l'intérêt de codage efficace..., j'ai rencontré un problème similaire avec agitée des animations à l'aide de Chrome récemment et dans la recherche d'une solution, suis tombé sur ce thread(mais pas FF ou IE) a retracé la question à l'un de mes effondrement des icônes à l'aide d'un png, par opposition à un gif (dès que j'ai troqué le png de gif) du navigateur webkit n'avais pas de problèmes produire des animations fluides (mais dès que j'ai troqué le png, mes animations ont été une fois de plus saccadée...)

    A votre png et gif de la transparence?
    Il n'a pas que c'était un 8 x 8 zone (a dépeint un effondrement et d'élargir l'icône comme un rectangle et carré)
    Anciens ou nouveaux, des questions comme celles-ci peuvent utiliser toujours plus de solutions. Merci pour carillon. J'ai été en utilisant les jpg à l'époque, personnellement.

    OriginalL'auteur JAMES