css: transform导致文字显示模糊


上网查了一下,好像是说和浏览器渲染有问题,transform里的值不能设置成基数,但我这里摆明就不是奇数:

解决办法

在使用 transform: translate3d(50%, 50%, 0) 时:

  • 如果元素的高度可以固定,那么其值设置为偶数即可
  • 如果元素的高度不可以固定,看看 translateY 是否可以设置为绝对单位(px)
  • 如果上面两者都不行,可以使用 display: flex; align-items: center 来做,缺点是多了一层父元素
  • 如果第三条方法也不行,可以尝试使用 display: table

参考文档

  1. stackoverflow blurry-text-on-transformrotate-in-chrome


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM