Css transition div shaking

Question

Why when I use position absolute and percentage width I have this glitch when I hover on div above? There is example. I have this glitch on little more complicated 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/

When you hover on red text then width of blue div are shaking. How can i avoid this without removing percentage and position absolute?

Answer 1

It works fine for me, but if you find an element "shaking" (esp in Chrome), it's likely because of the translate function not working with the z-index correctly

If you need to fix it, you can use this code (lifesaver):

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);