css: transform导致文字显示模糊

有人认为模糊的原因是：“transform时div的宽度或者高度并不是偶数，偏移 50% 之后，像素点不是整数，和显示像素没有对上”。我暂时还不完全理解，我的结论如下文描述。

元素高度的影响

随机高度 是否模糊 备注
298 No -
297 Yes -
163 Yes -
178 No -

结论：当height为偶数时，transform元素不会显示模糊

当translateY是绝对单位时不会模糊

随机高度 是否模糊 备注
42px No -
31px No -
31px No -

结论：当 translateY不为百分比，而是px时也不会显示模糊

解决办法

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

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

参考文档

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

css: transform导致文字显示模糊的更多相关文章

  1. Unity_3DText文字显示模糊怎么办

    在unity3d中创建一个3d text文字对象模型,但是发现默认情况下显示的文字很模糊,这种情况我们可以通过放大字体尺寸的方式解决这个问题,然后通过缩放的方式改变其大小. 1.打开unity3d场景 ...

  2. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. css设置使文字显示2行多余的为省略号。。。

    .title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-a ...

  4. css设置使文字显示2行多余的为省略号...

    1 2 3 4 5 6 7 8 9 10 11 12 .title{        font-size: .7rem;        line-height: 1.5rem;          ove ...

  5. 疑难杂症：运用 transform 导致文本模糊的现象探究

    在我们的页面中,经常会出现这样的问题,一块区域内的文本或者边框,在展示的时候,变得特别的模糊,如下(数据经过脱敏处理): 正常而言,应该是这样的: emmm,可能大图不是很明显,我们取一细节对比,就非 ...

  6. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  7. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  8. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  9. CSS - 实现文字显示过长时用省略

    一.添加-文字显示超出范围时隐藏属性 overflow:hidden; 二.添加-超出文字省略号属性 text-overflow:ellipsis; 三.添加-文字不换行属性 white-space: ...

随机推荐

  1. 自己的系统重装之后，怎么去重新的装官方的office办公软件，详细教程

    1  访问官网地址--微软,并通过自己的微软账号进行登录,转到下面的界面 2   点击上图的菜单栏的offce菜单项,跳转到下图 3  点击  菜单栏的产品  之后选择  查看office的全部的历史 ...

  2. java面试记录二：spring加载流程、springmvc请求流程、spring事务失效、synchronized和volatile、JMM和JVM模型、二分查找的实现、垃圾收集器、控制台顺序打印ABC的三种线程实现

    注:部分答案引用网络文章 简答题 1.Spring项目启动后的加载流程 (1)使用spring框架的web项目,在tomcat下,是根据web.xml来启动的.web.xml中负责配置启动spring ...

  3. mysql中获取本月第一天、本月最后一天、上月第一天、上月最后一天等等

    转自: https://blog.csdn.net/min996358312/article/details/61420462 1.当函数使用时,即interval(),为比较函数,如:interva ...

  4. [USACO10MAR] 伟大的奶牛聚集 - 树形dp

    每个点有重数,求到所有点距离最小的点 就是魔改的重心了 #include <bits/stdc++.h> using namespace std; #define int long lon ...

  5. Linux系统初学者的常见问题解决集结大全

    http://www.embeddedlinux.org.cn/html/xinshourumen/200809/22-86.html 一. 如何建立多用户 提醒大家一句,别一直使用root用户,因为 ...

  6. jenkins Exec exit status not zero. Status [-1]

    jenkins是使用ssh连接服务器后,如果使用grep获取进程并kill时,会jenkins Exec exit status not zero. Status [-1],解决办法:在获取进程时,使 ...

  7. SpringBoot整合RabbitMQ出现org.springframework.amqp.AmqpException: No method found for class

    @Component @RabbitListener(queues="my_fanout") public class Consumer {     @RabbitHandler  ...

  8. ETag使用

    关于ETag相关知识: https://blog.csdn.net/kikikind/article/details/6266101  https://blog.csdn.net/jkxiaoxing ...

  9. Python的特点

    简单易学. 免费开源. 跨平台. 解释性.不需要编译就可以直接运行,使用更加简单,移植性更强. 面向对象.arcgis也支持面向对象编程.

  10. vs2019 scanf 解决 C4996问题

    1. 首先选择项目 2. 然后选择最下面那行的 工程属性, 其后于此处 3. 添加上 :_CRT_SECURE_NO_WARNINGS 最后保存,使用 scanf 读取即无报错了