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. UML 工具 Dia

    linux下一款不错的流程图工具:dia. dia是一款非常优秀的制图工具,可以用于绘制 类图,流程图等等 安装此工具: 1.打开终端(快捷键:ctrl+alt+t). 2.输入命令:$sudo ap ...

  2. 南昌邀请赛B题（拉格朗日插值）

    题目链接:https://nanti.jisuanke.com/t/40254 #include<iostream> #include<cstdio> #include< ...

  3. Leetcode Week2 Two Sum

    Question Given an array of integers, return indices of the two numbers such that they add up to a sp ...

  4. @HystrixCommand 不能被导包

    添加pom文件 <dependency>  <groupId>com.netflix.hystrix</groupId>  <artifactId>hy ...

  5. VS Code中Ionic serve命令 执行跳出的问题

    项目情况:用vscode编写的ionic(tab类型)项目(具体使用到的技术Angular\Typescrip\Ionic) 具体情况如下: 找到的可能原因: 出错的项目情况:在一个ts文件中编写两个 ...

  6. C语言-无符号数与有符号数不为人知的秘密

    一.无符号数与有符号数 1.计算机中的符号位 数据类型的最高位用于标识数据的符号 -最高位为1,表明这个数为负数 -最高位为0,表明这个数为正数 #include <stdio.h> in ...

  7. react 和 vue 的优缺点总结

    React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...

  8. cocos Studio 特效文件播放失败

    可能是json文件中file的Path不对引起的.因为生成的path是根据文件在项目中的path生成的,即当此特效不是项目的一级目录时,会带有项目中上级目录,导致找不到文件(不会报错). ccs.lo ...

  9. 少年的u

    发现了我提取DNa的过程存在问题,能够跑出action 但是不能克隆出基因.老师给我解释了为什么,说是我的DNA质量不是很高.但是在接下来的时间我会解决这个问题. 和师姐一起去上面的实验室,看了定量P ...

  10. CSS的快速入门

    CSS的快速入门 1.CSS要学习的内容主要包括 1. CSS概念和快速入门 2.CSS选择器(重点+难点) 3.美化网页(文字.阴影.超链接.列表.渐变,等) 4.盒子模型 5.浮动 6.定位 2. ...