在 Chrome 中，CSS 过渡效果使图像模糊/移动图像 1 像素? [英] CSS transition effect makes image blurry / moves image 1px, in 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 明智，您可以使用 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 现在处理 backface-visibility 和 transform 而没有 -webkit- 前缀.我目前不知道这会如何影响其他浏览器的渲染(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.

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