WebKit:带有css scale + translate3d的模糊文本
WebKit:带有css scale + translate3d的模糊文本
提问于 2011-11-06 07:21:33
我发现了一个问题，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 -这里的重点是将代码剥离到最基本的部分。
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-11-07 23:37:43
Webkit将3d变换后的元素视为纹理而不是矢量，以便提供硬件3d加速。唯一的解决方案是增加文本的大小并缩小元素的比例，本质上是创建一个更高分辨率的纹理。
查看此处：http://jsfiddle.net/SfKKv/
请注意，抗锯齿仍然不够(词干丢失)，所以我用一些文本阴影来增强文本。
Stack Overflow用户
发布于 2013-06-27 16:45:43
我发现使用：
-webkit-perspective: 1000;在Android nexus4.2上试验了一段时间后，在你的字体或图标设置的容器上为我保持了清晰的东西。
Stack Overflow用户
发布于 2016-03-09 21:26:00
尝尝这个
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}或者，对于更精确的方法，您可以调用javascript函数，通过删除矩阵的十进制值来重新计算转换矩阵。请参阅：https://stackoverflow.com/a/42256897/1834212
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8024061
复制相关文章
相似问题