為什麼我的 CSS 過渡在 Chrome 中使圖像模糊或移動 Div？

Chrome 中CSS 過渡中的影像模糊和移動的Div

在CSS 過渡中，對div 應用翻譯效果可能會導致意想不到的後果，例如影像模糊或影像移動1 像素。當頁面上存在捲軸時，此問題尤其明顯。這個問題背後的罪魁禍首在於 CSS 變換固有的三維特性。

解決方案：強制平面渲染

為了解決這個情況，CSS 屬性-webkit -backface-visibility 可以應用於div，強制它看起來更二維。此屬性告訴瀏覽器不要渲染 div 的背面，從而有效地展平其外觀。

此外，將 -webkit-transform 設定為 translateZ(0) scale(1, 1) 可確保 div 保持在相同平面並正確縮放。

已更新語法：

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

透過展平div，這些CSS 屬性可防止過渡無意中操縱div 的三維屬性，從而實現平滑且不模糊的過渡。

以上是為什麼我的 CSS 過渡在 Chrome 中使圖像模糊或移動 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！