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

修正CSS 轉換後模糊的文字：Chrome 中的scale()

Chrome 使用者報告了最近的問題，即應用了CSS 後文字變得模糊變換：scale() 動畫。此問題是 Chrome 獨有的，不會影響 Safari 等其他 Webkit 瀏覽器。

以下 CSS動畫導致模糊：

@-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);
  }
}

要解決此問題，您可以使用以下任一方法具有以下屬性：

• 背面Visibility：

backface-visibility: hidden;

此屬性簡化了動畫只影響物體的正面，消除了背面造成的模糊效果

• TranslateZ:

transform: translateZ(0);

TranslateZ強制對動畫進行硬體加速，這也可以修復模糊。

此外，您可以選擇包含以下屬性來增強渲染：

-webkit-font-smoothing: subpixel-antialiased;

這可能會稍微改變 Web 字體的外觀，但可能值得嘗試。

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