为什么我的 CSS 转换会导致 Chrome 中的图像模糊和移动？

CSS 过渡效果导致 Chrome 中图像模糊和移动？

CSS 过渡效果导致 Chrome 中图像模糊和移动的问题可能是归因于在某些上下文中操作元素时 CSS 转换的限制。

问题

将过渡应用于涉及移动（平移）的元素时，可能会导致不良的副作用，例如：

• 图像模糊
• 图像轻微移动 1px

当页面有滚动条，并且在存在受影响元素的多个实例时尤其明显。

解决方案

要缓解此问题，您可以将以下 CSS 属性应用于做作的element:

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

说明

• -webkit-backface-visibility:hidden:此属性指示浏览器处理元素为 2D，防止默认背面渲染，这可能会导致artifacts.
• -webkit-transform:translateZ(0)scale(1, 1):此属性强制 Z 轴变换始终为 0，这也有助于使元素显得更加二维。

附加注释

• 对于旧版本的 Chrome，这些属性最初以 -webkit- 为前缀。不过，在当前版本中，您可以使用无前缀版本：

backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);

• 建议使用最新版本的 Chrome 以获得最佳渲染效果。
• 考虑使用图像渲染 CSS 属性来进一步增强过渡期间的图像质量，如之前的答案中所述。

以上是为什么我的 CSS 转换会导致 Chrome 中的图像模糊和移动？的详细内容。更多信息请关注PHP中文网其他相关文章！