Css 过渡 div 晃动

Question

为什么当我使用绝对位置和百分比宽度时，当我将鼠标悬停在上方的 div 上时会出现此故障？有例子。我在更复杂的网站上遇到了这个故障。

<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/

当您将鼠标悬停在红色文本上时，蓝色 div 的宽度会晃动。如何在不删除百分比和绝对位置的情况下避免这种情况？

Answer 1

它对我来说工作正常，但如果你发现一个元素“摇晃”(尤其是在 Chrome 中)，这可能是因为 translate 函数没有正确使用 z-index

如果你需要修复它，你可以使用这个代码(救星):

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