美文网首页
translate 出现字体模糊情况

translate 出现字体模糊情况

作者: 木易辰然 | 来源:发表于2017-05-03 16:53 被阅读0次

    translate2d出现模糊的原因是因为元素的高度、宽度中有奇数, 使用translate(-50%,-50%)之后,相当于宽度、高度除以2的效果,会出现 0.5px。浏览器能分辨的最小像素为1px,因此出现了模糊。
    所以使用translate(-50%,-50%)的时候,一定要 注意 让 元素的 宽度、高度为偶数。

    使用translate3d,里面的值用固定参数而不是百分比,如translate3d(50px,10px,10px), 则不会模糊。原因尚未明确。
    个人猜测 当translate3d内的值为百分比时,实际计算出来的结果会出现小数,因为chrome渲染的原因,所以会模糊(FF不会出现边框模糊) 。

    相关文章

      网友评论

          本文标题:translate 出现字体模糊情况

          本文链接:https://www.haomeiwen.com/subject/mofltxtx.html