css3 – WebKit:模糊的文本与CSS规模translate3d

前端之家收集整理的这篇文章主要介绍了css3 – WebKit:模糊的文本与CSS规模translate3d前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到一个问题,Chrome和其他WebKit浏览器大规模模糊任何css缩放内容,也应用了translate3d。

这里是一个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加速。对此的唯一解决方案是增加文本的大小和缩小元素,本质上创建更高res的纹理。

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

注意,抗锯齿仍然是低调的(茎已经丢失),所以我加强了文本与一些文本阴影。

原文链接:https://www.f2er.com/css/222722.html

猜你在找的CSS相关文章