為什麼我的 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中文網其他相關文章！