我发现 Chrome 和其他 WebKit 浏览器会严重模糊任何也应用了 translate3d 的 css 缩放内容。
这是一个 JS 小提琴：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 - 这里的重点是将代码精简到最基本的部分。
Webkit 将 3D 变换元素视为纹理而不是矢量，以提供硬件 3D 加速。唯一的解决方案是增加文本的大小并缩小元素的尺寸，本质上是创建更高分辨率的纹理。
看这里： http://jsfiddle.net/SfKKv/
请注意，抗锯齿功能仍然低于标准（词干丢失），因此我用一些文本阴影增强了文本。
我发现使用：
-webkit-perspective: 1000;
在 Android Nexus 4.2 上尝试这个问题一段时间后，你的字体或图标集的容器让事情变得清晰。
CSS 滤镜效果是一种图形操作，允许操纵任何 HTML 元素的外观。自 Chromium 19 起，这些滤镜经过 GPU 加速，使其速度超快。
CSS3 引入了一堆标准滤镜效果，其中之一就是模糊滤镜：
-webkit-filter: blur(radius);
“半径”参数影响屏幕上有多少像素相互混合，因此较大的值会产生更多的模糊。零当然会使图像保持不变。
将半径设置为 0 将强制浏览器使用 GPU 计算并强制它保持 html 元素不变。这就像应用“硬边”效果。
因此，为了修复这种模糊效果，对我来说最好的解决方案是添加这行简单的代码：
-webkit-filter: blur(0);
还有一个已知的错误仅影响视网膜屏幕。 （请参阅此处：为什么blur(0) 不能删除视网膜屏幕上Webkit/Chrome 中的所有文本模糊？）。因此，为了使其也适用于视网膜，我建议添加第二行：
-webkit-transform: translateZ(0);
试试这个
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
或者为了更精确的方法，您可以调用 JavaScript 函数通过删除矩阵的小数值来重新计算变换矩阵。请参阅：https://stackoverflow.com/a/42256897/1834212
我在将同位素插件（http://isotope.metafizzy.co/index.html）与缩放插件（http://janne.aukia.com/zoomooz/）结合使用时遇到了这个问题。 我构建了一个 jquery 插件来处理我的情况。 我把它放在 github 存储库中，以防任何人都可以从中受益。 - https://github.com/charleshimmer/jquery-hirestext。
我使用 javascript 将文本向上移动 1px，然后在 100 毫秒后向下移动 1px。它几乎是无感知的，完全解决了跨浏览器的问题。
在缩放图库中的图像时，我遇到了 translate3d 产生低质量结果的问题。我的解决方案是使用 translateX(...)translateY(...)scale(...) 而不是translate3d(...)scale(...)。它会产生高质量的缩放/转换内容。如果您也需要操纵 Z 轴，我相信您可以添加 translateZ(...) 到混合中。
body {
-webkit-font-smoothing: subpixel-antialiased;
}
或者我认为您可以将其放在特定元素上，但我遇到了影响整个网站的一个元素的问题。
我认为这是自定义字体的问题。
Webkit 将 3D 变换元素视为纹理而不是矢量 为了提供硬件3D加速。
这与此无关。您会注意到，可以通过添加持续时间和方向信息（例如 0.3 线性）来解决混叠问题。你有一匹母马试图在运行时渲染一切：
同上^