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

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

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

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

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

2020年更新

• 如果图像模糊，请务必从下面检查答案，尤其是image-renderingCSS属性。
• 为了获得最佳实践的可访问性和SEO，您可以<img>使用对象适合 CSS属性用标签替换背景图片。

原始答案

试试这个 CSS中：

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

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

• 默认情况下绘制背面，以允许通过旋转等翻转事物。如果只向左，向右，向上，向下，缩放或顺时针旋转，则无需这样做。
• 将Z轴平移为始终具有零值。
• Chrome现在可以处理backface-visibility并且transform没有-webkit-前缀。我目前不知道这会如何影响其他浏览器的渲染（FF，IE），因此请谨慎使用非前缀版本。

您需要对元素应用3d变换，因此它将获得自己的复合层。例如：

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

要么

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

有关图层创建条件的更多信息，请点击此处阅读：Chrome中的加速渲染

一个解释：

示例（悬停绿色框）：

• 问题：过渡可能对兄弟元素（OSx Lion，Chrome 30）造成闪烁效果
• 解决方案：元素在其自己的复合层上

当您在元素上使用任何过渡时，它会导致浏览器重新计算样式，然后即使过渡属性是可见的（在我的示例中是不透明的），也要重新布局内容并最终绘制一个元素：

这里的问题是内容的重新布局，当过渡发生时，该内容可以使页面上的“跳舞”或“闪烁”元素产生效果。如果要进行设置，请选中“显示复合层”复选框，然后将3d变换应用于元素，您将看到它获得了自己的层，并用橙色边框勾勒了轮廓。

元素获得自己的图层后，浏览器只需要在过渡时合成图层即可，而无需重新布局甚至进行涂装操作，因此必须解决以下问题：

嵌入的YouTube iframe也存在相同的问题（翻译用于将iframe元素居中）。在尝试之前，以上解决方案均无效重置CSS过滤器无效和进行魔术操作。

结构体：

<div class="translate">
     <iframe/>
</div>

风格[之前]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

风格[之后]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

我推荐了一种实验性的新属性CSS，该CSS在最新的浏览器上进行了测试，效果很好：

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

这样浏览器将知道渲染的算法

刚刚发现了元素变形时变得模糊的另一个原因。transform: translate3d(-5.5px, -18px, 0);加载后，我一直在重新定位元素，但是该元素变得模糊了。

我尝试了上述所有建议，但结果却是由于我对转换值之一使用了十进制值。整数不会引起模糊，而且我离整数越远，模糊就越糟。

即5.5px最模糊元素，5.1px最少。

只是以为我会在这里丢下它，以防它对任何人有帮助。

我通过逐步过渡而不是平稳地欺骗了问题

transition-timing-function: steps(10, end);

这不是解决方案，而是一种作弊，不能应用于任何地方。

我无法解释，但对我有用。没有其他答案对我有帮助（OSX，Chrome 63，非视网膜显示屏）。

https://jsfiddle.net/tuzae6a9/6/

扩展到两倍并降低到一半zoom对我有用。

transform: scale(2);
zoom: 0.5;

我已经尝试了大约10种可能的解决方案。混合它们，它们仍然不能正常工作。最后总是会有1px的抖动。

我通过减少过滤器的过渡时间来找到解决方案。

这不起作用：

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

解：

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

试试这个小提琴：

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

我希望这可以帮助别人。

尝试 filter: blur(0);

对我有用

对我来说，现在是2018年。解决我的问题（悬停在图像上的白色小闪烁线）唯一解决的问题是将其应用于我的链接元素，该链接元素包含具有 transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

设置过渡持续时间.3s等于过渡时间步长值对我有所帮助.3s

刚遇到同样的问题。尝试设置position：相对于父元素，这对我有用。