變換後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. 背面可見性隱藏：此技術透過將動畫簡化為物件的正面，消除預設的正面和背面狀態來解決此問題。 &&&]

   背面可見性： hidden;

   backface-visibility: hidden;

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

   transform: translateZ(0);

   backface-visibility: hidden;