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

问题描述

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

I have some CSS that on hover, a CSS transition effect will moves a div.

正如您在示例中看到的那样，问题在于 translate 转换具有可怕的副作用，即使 div 中的图像向下/向右移动 1px(并且可能会一直调整大小)有点?)，这样它就显得格格不入，失焦了……

The problem, as you can see in the example, is that the translate transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly resize ever so slightly?) so that it appears out of place and out of focus...

故障似乎在应用悬停效果的整个过程中都适用，并且从反复试验的过程中，我可以肯定地说似乎只在平移转换移动 div 时发生(也应用了框阴影和不透明度，但删除后的错误没有区别).

The glitch seems to apply the whole time the hover effect is applied, and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div (box shadow and opacity are also applied but make no difference to the error when removed).

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

The problem only seems to happen when the page has scrollbars. So the example with just one instance of the div is fine, but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again...

推荐答案

2020年更新

• 如果您有图像模糊的问题，请务必检查下面的答案，尤其是 image-rendering CSS 属性.
• 为了获得最佳实践可访问性和 SEO 明智，您可以使用 <img> 标记docs/Web/CSS/object-fit" rel="noreferrer">object-fit CSS 属性.

2020 update

• If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
• For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

在你的 CSS 中试试这个:

Try this in your CSS:

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

这样做的目的是让分区表现得更加二维".

What this does is it makes the division to behave "more 2D".

• 默认绘制背面以允许通过旋转翻转物体等等.如果您只是顺时针向左、向右、向上、向下、缩放或旋转(逆时针)，则没有必要这样做.
• 将 Z 轴平移为始终为零值.
• Chrome 现在可以在没有 -webkit- 前缀的情况下处理 backface-visibility 和 transform.我目前不知道这会如何影响其他浏览器的渲染(FF、IE)，所以请谨慎使用不带前缀的版本.
• Backface is drawn as a default to allow flipping things with rotate and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.
• Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

这篇关于CSS过渡效果使图像模糊/将图像移动1px，在Chrome中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！