变换后 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;