WebKit：带有CSS比例+ translate3d的模糊文本

Posted 2023-02-16

【中文标题】WebKit：带有CSS比例+ translate3d的模糊文本

【英文标题】：WebKit: Blurry text with css scale + translate3d

【发布时间】：2011-12-22 20:51:59

【问题描述】：

我发现 Chrome 和其他 WebKit 浏览器会大量模糊任何也应用了 translate3d 的 css 缩放内容。

这是一个 JS Fiddle：http://jsfiddle.net/5f6Wg/。 （在 Chrome 中查看。）

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


.testInner

  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

是否有任何已知的解决方法？我在上面的简单示例中得到了这一点，我可以简单地使用 translate 而不是 translate3d - 这里的重点是将代码剥离到最基本的部分。

【问题讨论】：

我认为这是固定的，对我来说并不模糊

一个小补充：在上一个 Chrome 中，我遇到了一些问题，比如在为 translate3d 使用不四舍五入的值时。将它们四舍五入为我修复了所有模糊问题。

【参考方案1】：

Webkit 将 3d 转换后的元素视为纹理而不是矢量，以提供硬件 3d 加速。解决这个问题的唯一方法是增加文本的大小并缩小元素，本质上是创建更高分辨率的纹理。

请看这里： http://jsfiddle.net/SfKKv/

请注意，抗锯齿仍然低于标准（词干丢失），所以我用一点文本阴影来加强文本。

【讨论】：

那么在移动 webkits 上会慢很多吗？

很棒的解决方案，看起来有点像 Retina 解决方案，但适用于台式机。喜欢这个想法，立即实施，超级道具。

在 Chrome 版本 54.0.2840.71 m（64 位）中对我来说看起来很糟糕

【参考方案2】：

Webkit 将 3d 转换后的元素视为纹理而不是矢量 为了提供硬件 3d 加速。

这与它无关。您会注意到，您的混叠问题可以通过添加持续时间和方向信息（例如 0.3 线性）来解决。您的母马试图在运行时渲染所有内容：

以上同理^

【讨论】：

对不起，汤姆，但我不知道你指的是什么。你是说添加动画吗？ （目的只是缩放，而不是动画。）如果您修改原始的 JS Fiddle，也许会有所帮助。

因为我使用的是过渡，所以我添加了持续时间和方向。模糊仍然存在。

【参考方案3】：

body 
-webkit-font-smoothing: subpixel-antialiased;

或者我认为你可以把它放在一个特定的元素上，但是我遇到了一个影响整个网站的元素的问题。

我认为这是自定义字体字体的问题。

【讨论】：

感谢您尝试在这里增加价值，但我提供的 JS Fiddle 没有使用自定义字体，并且 -webkit-font-smoothing 似乎没有任何区别。它在上面的小提琴中对你有用吗？

子像素抗锯齿字体平滑现在是 Chrome 中的默认设置。

【参考方案4】：

我在将同位素插件 (http://isotope.metafizzy.co/index.html) 与缩放插件 (http://janne.aukia.com/zoomooz/) 结合使用时遇到了这个问题。我构建了一个 jquery 插件来处理我的情况。我把它扔到了一个 github repo 中，以防任何人都能从中受益。 - https://github.com/charleshimmer/jquery-hirestext.

【参考方案5】：

我发现使用：

-webkit-perspective: 1000;

在我在 android nexus 4.2 上尝试了一段时间后，在你的字体或图标集的容器上让事情变得清晰。

【讨论】：

该死，成功了！连同 -webkit-transform: translate3d(0,0,0)。字母形式在刻度末端以一种奇怪的方式突然出现，这解决了它。在阳光下尝试了所有其他方法。

假设这是因为这些属性触发了 GPU 加速，同时也提高了这些元素的转换性能！ :)

@SergeiBasharov 我不认为 OP 想要移动解决方案。在桌面上它什么也不做。我赞成这个答案，但仅此而已。

我还需要-webkit-transform: translate3d(0,0,0)

【参考方案6】：

css 过滤器效果是一种图形操作，允许操纵任何 HTML 元素的外观。由于 Chromium 19 这些过滤器是 GPU 加速的，因此它们的速度非常快。

CSS3 引入了一堆标准的滤镜效果，其中之一就是模糊滤镜：

-webkit-filter: blur(radius);

“半径”参数会影响屏幕上有多少像素相互融合，因此较大的值会产生更多的模糊。零当然会使图像保持不变。

将半径设置为 0 将强制浏览器使用 GPU 计算并强制它保持您的 html 元素不变。这就像应用“硬边”效果。

所以对我来说，修复这种模糊效果的最佳解决方案是添加以下简单的代码行：

-webkit-filter: blur(0);

还有一个仅影响视网膜屏幕的已知错误。 （见这里：Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?）。因此，为了使其也适用于视网膜，我建议添加第二行：

-webkit-transform: translateZ(0);

【讨论】：

请给你的答案一些解释

作为注释，在开发工具中动态应用模糊似乎与页面加载时的效果不同。不确定是不是只有我，但这可能是您正在寻找的答案，只需重新加载页面。

在谷歌搜索上尝试了所有其他方法之后，这就是修复。谢谢！

这对我有用！ .modal 最大宽度：计算（100% - 50px）；最大高度：计算（100% - 50px）；位置：固定；最高：50%；左：50%； -ms-transform: 翻译(-50%, -50%); -webkit-transform: 翻译(-50%, -50%); -moz 转换：翻译（-50%，-50%）； -o-transform: 翻译(-50%, -50%);变换：翻译（-50%，-50%）； -webkit-过滤器：模糊（0）；溢出：隐藏；

maoosi 的答案曾经对我有用，但似乎发生了一些变化，因为它在最新的 Chrome 中不再适用？

【参考方案7】：

我使用 javascript 将文本移到顶部 1 像素，然后在 100 毫秒后，再向下移动 1 像素。它几乎是无感知的，并且完全跨浏览器解决了问题。

【参考方案8】：

试试这个

 ...
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);

或者对于更精确的方法，您可以调用 javascript 函数通过删除矩阵的十进制值来重新计算转换矩阵。见：https://***.com/a/42256897/1834212

【讨论】：

对我来说，zoom: 1.005; 工作得很好。无需使用scale