CSS过渡div晃动答案

【问题标题】：Css transition div shakingCSS过渡div晃动
【发布时间】：2015-11-29 21:43:15
【问题描述】：

为什么当我使用绝对位置和百分比宽度时，当我将鼠标悬停在上面的 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 的宽度会晃动。在不删除百分比和绝对位置的情况下如何避免这种情况？

【问题讨论】：

对我来说似乎很好。使用 Chrome 33 测试。但是，您可能希望在 .box 选择器上使用 transition 属性。
我在您的代码中发现了一些错误。这是jsfiddle 效果更好吗？
感谢大家的反馈！我现在看到它似乎只有在放大 chrome 窗口时才会晃动。我将它放大了 150%，然后才出现晃动问题。

标签： css html

【解决方案1】：

它对我来说很好，但如果你发现一个元素“抖动”（尤其是在 Chrome 中），这可能是因为 translate 函数无法正确使用 z-index

如果需要修复，可以使用这段代码（救命稻草）：

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

【讨论】：

谢谢，我现在看到似乎只有当 chrome 窗口放大 150% 时才会出现晃动问题。但似乎当我将您的代码添加到子元素时它可以工作并且它不会晃动！ :) 在这种情况下设置它的好习惯？
是的，您可以随时设置 - 这是一个很好的代码来帮助保持一切正常。如果您发现特定元素仍在晃动，则应将代码分别应用于这些元素！希望这会有所帮助！
再次感谢您:)
您先生，真是个天才！太感谢了！我只在 Firefox 中看到这种震动。
这个css属性让文字变得模糊了