Je vais animer la largeur d'un élément li code> à l'aide de jQuery dans un simple extrait de code. J'utilise Hover () code> comme gestionnaire et .animer () code> pour animer la largeur. Voici mon code. <nav>
<ul class="nav">
<li class="one">
<a href="homeandnews/">
<span class="title">Home and News</span>
<br/>
<span class="subtitle">Learn more about me and read general updates!</span>
</a>
</li>
</ul>
<nav>
5 Réponses :
Cela semble être un bogue dans la version chromée 21.0.1180.60 et peut également être présent dans d'autres versions. Rien de mal avec le code ici et je suppose que nous laissons simplement la solution de contournement ou que nous soumettons un rapport de bogue maintenant.
soupir.
Ok, j'ai déposé un rapport de bogue de chrome - vous pouvez Suivez-la ici si vous êtes intéressé! :)
Impressionnant! Je vais certainement le suivre.
WOW, merci de remplir un rapport de bogue, c'est un gros problème :( Certaines de mes animations sont agiées étranges :(
+1, une animation qui a bien fonctionné auparavant, fonctionne toujours bien dans tous les autres navigateurs, y compris le Safari de Webkit 'Brother', a maintenant des effets de tremblance étranges.
J'ai changé votre CSS: Quoi qu'il en soit, si cela aide, j'avais le même problème lors de l'animation de la hauteur d'un div dans une autre div avec la hauteur: Auto. Changer la hauteur à une largeur du correctif résolu.
J'espère que cela aide. ul.nav Li A , ajoutant float: droite à celui-ci et qui corrige le shake.
Ce problème s'est produit avec certains J'ai remarqué que l'élément avait aussi div S quand j'essayais d'animer un autre divisé en informatique. Ce que j'ai remarqué, c'est que cela se produit si le div ou l'élément comporte la propriété CSS Affichage: Inline-Block . Rendre l'élément float aurait résolu le problème, mais inline-block était requis dans mon cas.
Vertical-Align: Moyen Propriété CSS. Changer à Vertical-Align: Text-Bottom a résolu le problème. Plus d'effet tremblant dans chrome v23 (peut être le bogue persiste toujours dans les versions plus récentes).
Je cherchais à ce problème aussi et ceci: Plus d'informations Vous trouverez ici: transformation CSS3 Rotation provoquant 1px Shift en chrome
espère qu'il aide -webkit-backface-visibilité: caché; résout mon problème. J'ajoute ce tremblant étrange tout en utilisant CSS3 Transformer sur un SVG.
Ceci a fait l'affaire merci! Avaient des restes horizontales (artefacts) après un effet de survol de la boîte à ombre avec une transition appliquée.
eu un problème similaire avec SHAINK SVGS lorsqu'il y a une transition CSS appliquée à la balise parentale. J'ai essayé d'appliquer tout ce que je pourrais aléater au hasard, et ce correctif a finalement aidé:
Cela lui a fixé pour moi. J'avais 
et une application transformer: translate3d (0, 0, 0); a corrigé le problème de gigue.
Je ne vois pas ce comportement. Peut-être que c'était plus chaud quand j'ai essayé?
Je viens de vous voir page dans Firefox. Pas de problème, ça marche bien. Impossible de repérer l'effet tremblant que vous avez mentionné.
Haha, grand commentaire. Lorsque vous survolez l'un des éléments
Li et ils animent la largeur, le texte de l'intérieur qui frissonne de gauche à droite vraiment étrangement. Regardez de près à la droite de l'écran. La seule façon de montrer que vous êtes une vidéo. J'ai essayé sur plusieurs machines et obtenez le même effet de manière étrangement. Je suis exclu. Ce n'est pas l'élément réelli qui frissonne, c'est le texte à l'intérieur. Je vais clarifier la question.Je ne vois pas ce comportement étrange
Bien que je ne puisse pas reproduire cela, cela ressemble à une erreur de pixel d'arrondi. Mais je n'ai vu que cela se produisant lorsque vous animer un bord d'un élément dans une direction et compenser la position de contenu en l'animant de manière opposée ...
Ah dieu, s'il vous plaît dites-moi que je ne vais pas fous. Le code a l'air 100% correct pour moi et je sais que c'est bien que je ne sais pas ce qui pourrait causer cela. :(
@Chrisfrancis qui était de mon mieux devinez au problème. Une autre modification: cela ne se produit que dans Chrome!
J'ai mis en place un cas de test ici avec 2 exemples - dans l'une d'entre elles, les durées d'animation sont sorties Par 1 ms qui forcera une folie de pixels fragile, les secondes durées sont identiques et (théoriquement) ne devraient pas avoir de tremblement. Pouvez-vous leur donner un test sur votre chrome?
Courtiser! Enfin, quelqu'un d'autre voit de quoi je parle et peut confirmer que je ne suis pas mental. J'ai regardé votre exemple et, en effet, lors de l'animation dans le premier exemple, vous pouvez voir la folie fragile bien que ce ne soit pas aussi mauvais. Je me demande si c'est juste la vitesse d'animation rapide que Chrome a des problèmes? C'est extrêmement impair comment il ne secoue que lors de l'animation dans et non cependant. Je suis perdu.
Je vais également inclure mon HTML pour dépanner.
Je ne sais toujours pas ce qui cause cela - vous n'émettez qu'une propriété et quelle que soit la largeur, le bord droit doit être introduit fort contre le conteneur extérieur. Peut-être que c'est un bug de rendu en chrome où la position de bord droit est calculée après avoir déterminé le bord et la largeur de gauche. Mais je devine juste ...
CERTAINEMENT PAS!!! Mon chrome vient de se mettre à jour et maintenant je peux reproduire le problème aussi! La version précédente était 20.0.1132.57, une nouvelle version est 21.0.1180.60 (identique à la vôtre). Certainement un bug chrome !!
C'est un bug en chrome !!!! SUCCESS.JPG Ils ont gâché quelque chose. On dirait que je ne suis pas fou après tout. Donc, tout le monde veut soumettre le rapport de bogue ou devrais-je? Chrisfrancis je suppose que vous avez des dibs.
Haha, oui, je suis sûr que je suis dessus. Va essayer de créer un cas de test reproductible similaire à votre site - mon jsfiddle avec l'erreur d'arrondi de pixels délibérés fonctionne mieux avec la nouvelle mise à jour ...: /
Eh bien, cela est à la fois passionnant et frustrant en même temps. J'espère qu'ils le répareront bientôt.