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