CSS过渡效果会导致图像模糊/在Chrome中将图像移动1px？

一尘不染

css

我有一些CSS，悬停时CSS过渡效果会移动div。

正如您在示例中看到的那样，问题在于translate过渡具有可怕的副作用，即使div中的图像向下/向右移动1px（并且可能会略微调整大小吗？），以致它看起来不合适并没重点…

毛刺似乎一直在应用悬停效果的整个过程中，并且从反复试验的过程中，我可以肯定地说，似乎仅在平移过渡移动div时才出现（也应用了框阴影和不透明度，但是对删除后的错误）。

仅当页面具有滚动条时，才会出现此问题。因此，仅使用一个div实例的示例就可以了，但是一旦添加了更多相同的div，并且页面因此需要滚动条，问题就会再次出现…

阅读 285

2020-05-16

共1个答案

一尘不染

您是否在 CSS中 尝试过此方法？

.yourDivClass {
    /* ... */

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

这样做是为了使该分区表现为“更多2D”。

编辑

Chrome现在可以处理backface- visibility并且transform没有-webkit-前缀。我目前不知道这会如何影响其他浏览器的呈现（FF，IE），因此请谨慎使用非前缀版本。

2020-05-16