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. php 爬虫采集

    概述 现在爬虫技术算是一个普遍的技术了,各个语言的爬虫百家争鸣,但是根据笔者自己的感觉还是python是主流.爬虫涉及到太多的东西,笔者并不是专业的爬虫工程师,只不过个人兴趣分享一下.由于笔者是php ...

  2. VSCode配置之open-with-Live-Server 无法打开浏览器【解决方法】

    如果你的vscode编辑器打开浏览器时默认打开的是iE,想要把它改为chrome,怎么办呢? 我遇到如下原因: 这是按照网上的setting.json配置 这是运行了 open-with-live-s ...

  3. php redis使用

    访问连接 远程访问 //实例化 $redis=new Redis(); try{ $redis->connect('47.98.55.11','6379'); $redis->auth(' ...

  4. Python元组详解

    元组的特征 元组类型的名字是tuple 元组的一级元素不可被修改.不能增加或者删除: 元组和列表的书写区别是将中括号改成了小括号: 为方便区分元组和普通方法的参数,一般在元组的最后一个元素后保持加一个 ...

  5. 小I选宾馆

    小 I 选宾馆 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小 I 去天津玩啦,一路上,他跟他的同学发生了许多有趣的 ...

  6. nice-validator判断表单是否验证通过

    $("#formSurvery").isValid(function(is){ if(is){ alert("通过!") } } 如果is为false则表示不通 ...

  7. android TextView 支持长按自由复制

    因为EditText支持系统的长按自由复制,所以只需要把EditText通过配置达到TextView效果就行了 <EditText android:id="@+id/subject_i ...

  8. thinkphp中如何用路由调用前台html界面

    先上图片看看基本的文件位置 1.首先在application\route.php中定义路由 <?php use think\Route; Route::get("home", ...

  9. Ant风格表达式

    1. ?:匹配任意一个字符 *   :匹配0或者任意数量的字符 **  :匹配0或更多的目录

  10. 添加一个layer

    let testLayer = new TestLayer1();this.addChild(testLayer); let TestLayer1 = cc.Layer.extend({ ctor:f ...