為什麼 -webkit-transform:translate3d 會導致基於 WebKit 的瀏覽器中的文字模糊？

透過Translate3d 在基於WebKit 的瀏覽器中實現模糊文字後動畫

使用-webkit-transform 實現的某些動畫：基於WebKit 的translate3d iPhone 等瀏覽器可能會導致文字模糊或扭曲。此問題源自於瀏覽器的渲染引擎，儘管嘗試透過 CSS 變通辦法（例如刪除相對定位或應用 -webkit-font-smoothing: antialiased）來緩解該問題，但該問題仍然持續存在。

雖然基於 JavaScript 的動畫方法可以解決此問題，它們會影響支援 WebKit 的裝置的效能。為了在不犧牲速度的情況下規避該問題，解決方法是稍微改變變換值：

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

這種小數偏移有效地消除了模糊，同時保持了 translate3d 動畫的性能優勢。

以上是為什麼 -webkit-transform:translate3d 會導致基於 WebKit 的瀏覽器中的文字模糊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！