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. 48.Python中ORM模型实现mysql数据库基本的增删改查操作

    首先需要配置settings.py文件中的DATABASES与数据库的连接信息, DATABASES = { 'default': { 'ENGINE': 'django.db.backends.my ...

  2. C#索引器学习笔记

    本笔记摘抄自:https://www.cnblogs.com/ArmyShen/archive/2012/08/27/2659405.html,记录一下学习过程以备后续查用. 索引器允许类或者结构的实 ...

  3. WPF Dispatcher.BeginInvoke子线程更新UI

    在开发WPF应用时出现:”调用线程无法访问此对象,因为另一个线程拥有该对象.“ 是因为UI线程是WPF应用的主线程,若尝试子线程更新UI线程应使用Dispatcher.BeginInvoke()或者I ...

  4. 自定义结构体 Map

    struct Hashmap{ ,maxe=; ],nxt[maxe+],w[maxe+]; ]; ;;} void Add(int x,int y){son[++E]=y;nxt[E]=lnk[x] ...

  5. windows系统使用sketch设计的设计稿

    由sketch设计的文件因为没有windows系统的sketch所以无法使用windows系统的电脑打开,那么怎么办呢?可以借助zeplin, 通过sketch(mac电脑)上传到zeplin账号,然 ...

  6. java类及实例初始化顺序

    1.静态变量.静态代码块初始化顺序级别一致,谁在前,就先初始化谁.从上而下初始化(只在类加载时,初始化一次) 2.非静态变量.非静态代码块初始化顺序级别一致,谁在前,就先初始化谁.从上而下初始化(只要 ...

  7. springboot 扫描不到包 @SpringBootApplication 自动配置原理

    解决方案 在main类中增加注解 @ComponentScan("com.test.test.*") 扫描具体的包 @ComponentScan(basePackages = {& ...

  8. bootstrap-datatimepicker插件的使用

    1.引入相关的css.js文件(因为是bootstrap的,首先应该引入bootstrap.css和bootstrap.js): <link rel="stylesheet" ...

  9. JS全选按钮练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. 题解【洛谷P1314】[NOIP2011]聪明的质监员

    题面 题解 不难发现,\(W\)增大时,\(Y\)值会随之减小. 于是考虑二分\(W\). 如何\(\mathcal{O}(N)check?\) 每一次前缀和记录一下\(1-i\)之间\(w_i \g ...