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