Transition Css div secouant

Pourquoi lorsque j'utilise la position absolue et en pourcentage de la largeur, j'ai ce problème quand j'ai passez la souris sur les div ci-dessus?
Il est l'exemple. J'ai ce problème sur un peu plus compliqué site.

<div class="box"> text </div>

<div class="container">


<div>

.box {
    width: 50%;
    height: 50%;
    background: red;
}
.box:hover {
    transition: 0.5s;
    -webkit-transform: translate(0, 6px);

}
.container {
    position:absolute;
    top:40px;
    width:40%;
    height:50px;
    float:left;
    background: blue;
    color:white;
}

http://jsfiddle.net/TsUEH/

Lorsque vous passez le curseur sur le texte en rouge puis la largeur de bleu div tremblent.
Comment puis-je éviter cela sans enlever le pourcentage et la position absolue?

Il semble bien pour moi. Testé avec Chrome 33. Cependant, vous pourriez vouloir utiliser transition bien sur la .box sélecteur à la place.
J'ai trouvé quelques erreurs dans votre code. Est-ce jsfiddle fonctionne le mieux ?
Merci les gars pour vos commentaires! Je vois maintenant, Il semble que cette secousse c'est seulement quand chrome fenêtre est agrandie. Je pense avoir 150% d'un zoom et seulement ensuite secouer problème apparaît.

OriginalL'auteur NahKolor | 2014-03-15

  1. 19

    Il fonctionne très bien pour moi, mais si vous trouvez un élément "secouer" (esp dans google Chrome), c'est probablement à cause de la translate fonction ne fonctionne pas avec le z-index correctement

    Si vous avez besoin de résoudre ce problème, vous pouvez utiliser ce code (sauveteur):

    -webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
    Merci, je vois maintenant, il semble que secouer problème ne s'affiche lorsque google chrome fenêtre est agrandie de 150%. Mais il semble que lorsque j'ai ajouter votre code d'élément enfant il fonctionne et ses pas de trembler! 🙂 Bonnes pratiques à mettre dans ce cas?
    Yep, vous pouvez définir qu'à chaque fois que vous voulez - c'est un bon morceau de code pour aider à garder tout ce travail. Si vous trouvez des éléments particuliers sont toujours tremblant, vous devez appliquer le code de ces éléments individuellement! Espérons que cette aide!
    Merci beaucoup une fois de plus 🙂
    Vous, monsieur, êtes un génie! Merci beaucoup! Je ne vois que cette secousse qui se passe dans Firefox.

    OriginalL'auteur Richard Peck