为什么使用'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中文网其他相关文章！