为什么在 WebKit 浏览器中使用 Translate3d 和 Scale3d 时文本会模糊？-css教程-PHP中文网

为什么在 WebKit 浏览器中使用 Translate3d 和 Scale3d 时文本会模糊？

Patricia Arquette

发布： 2024-11-16 12:20:03

原创

704 人浏览过

Why Does Text Blur When Using Translate3d and Scale3d in WebKit Browsers?

模糊文本难题：WebKit 中的 CSS 缩放和 Translate3d

WebKit 浏览器（包括 Chrome）表现出一个特殊问题：CSS 缩放中的文本同时应用 translate3d 时，内容会变得明显模糊。这种行为在提供的 JS Fiddle 示例中很明显。

JS Fiddle 示例：

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

登录后复制

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

登录后复制

故障排除：

为了缓解这个问题，建议至：

增加文本大小：增加文本的字体大小以补偿缩放和平移造成的模糊。
缩小元素: 缩小包含元素的大小以适应放大的文本。这实质上为文本创建了更高分辨率的纹理，从而提高了清晰度。

示例：

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

登录后复制

注意：

虽然此解决方法解决了模糊问题，但它仍然可能导致抗锯齿效果不佳。为了增强可读性，请考虑在 .testInner 元素内的文本中添加轻微的文本阴影。

以上是为什么在 WebKit 浏览器中使用 Translate3d 和 Scale3d 时文本会模糊？的详细内容。更多信息请关注PHP中文网其他相关文章！