為什麼使用「transform:scale()」後我的文字在 Chrome 中變得模糊？

變換後Chrome 中的文字模糊：scale()

在最近的Chrome 更新中，出現了一個特殊問題，即使用CSS 變換渲染文字：scale() 屬性顯得模糊。使用以下特定程式碼時已觀察到此問題：

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

在 Chrome 中存取 rourkery.com 會發現主文字區域存在問題，而其他 WebKit 瀏覽器（如 Safari）似乎不受影響。

模糊文字難題的解決方案

解決此問題問題，可以採用兩種方法：

1. 隱藏背面可見性：此技術透過將動畫簡化到物件的前面來解決該問題，消除預設值正面和背面

   backface-visibility: hidden;

2. TranslateZ:此 hack 啟動動畫的硬體加速，有效解決渲染問題。

   transform: translateZ(0);

此外，一些用戶發現添加以下屬性是有益的：

-webkit-font-smoothing: subpixel-antialiased;

以上是為什麼使用「transform:scale()」後我的文字在 Chrome 中變得模糊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！