为什么我的 CSS 过渡图像在 Chrome 中会模糊或移动 1px？

Chrome CSS 过渡模糊图像或移动 1px

使用 CSS 过渡移动 div 时会出现一个常见问题：div 内的图像变得模糊或轻微移动。仅当转换涉及翻译且页面包含滚动条时，才会出现这种特殊行为。

要解决此问题，您可以对受影响的 div 实现以下 CSS 属性：

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

通过这样做，可以有效地使划分看起来更加“二维”。以下是每个属性用途的说明：

• -webkit-backface-visibility:hidden: 此属性隐藏分区的背面，通常默认情况下绘制该背面以允许翻转和旋转效果。由于您只执行简单的翻译，隐藏背面可以消除不必要的渲染。
• -webkit-transform:translateZ(0)scale(1, 1):此属性分配 Z-轴平移为零，有效地展平 3D 空间中的划分。 Chrome 原生处理此属性，但它包含在 -webkit- 前缀中，以便与旧版 Chromium 版本兼容。

以上是为什么我的 CSS 过渡图像在 Chrome 中会模糊或移动 1px？的详细内容。更多信息请关注PHP中文网其他相关文章！