translate 出现字体模糊情况

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,819评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 696评论 0 0