CSS过渡效果使图像模糊将图像移动1px，在Chrome中

发布于03月18日

我有一些CSS悬停，CSS转换效果会移动一个div.

正如您在示例中所看到的，问题在于translate转换有一个可怕的副作用，即使div中的图像向下/向右移动1px(并且可能会稍微调整大小？)所以它看起来不合适也不对焦...

这个毛刺似乎在应用悬停效果的整个过程中都适用，从反复try 的过程来看，我可以肯定地说，似乎只有当平移过渡移动div时才会发生故障(方框阴影和不透明度也会应用，但删除后对错误没有影响).

这个问题似乎只有在页面有滚动条时才会发生.因此，只有一个div实例的示例很好，但是一旦添加了更多相同的div，页面因此需要一个滚动条，问题再次出现……

推荐答案

在你的CSS分中试试这个:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

这样做的目的是让该部门的行为"更具2D色彩".

背面绘制为默认设置，以允许使用旋转翻转对象诸如此类.如果您只按顺时针方向左、右、上、下、zoom 或旋转(逆时针)，就没有必要这样做.
将Z轴平移为始终为零值.
Chrome现在可以处理不带-webkit-前缀的backface-visibility和transform.我目前不知道这对其他浏览器渲染(FF、IE)有什么影响，所以使用无前缀版本时要小心.