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. 0级搭建类010-Oracle Linux 6.x安装(OEL 6.10) 公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  2. hyper-v虚拟机不能访问外网的解决方案

    直接说解决方案,将虚拟机的一张网卡改为旧版网络适配器即可.具体原因还不可知. 延申一下,一般应该使用的交换机,是“外部”类型即可.

  3. linux - 服务器性能评估

    影响Linux服务器性能的因素 cpu 内存 磁盘IO 网络IO 系统性能评估标准 影响性能因素 好 坏 糟糕 CPU user% + sys%< 70% user% + sys%= 85% u ...

  4. java - CAS及CAS底层原理

    CAS是什么? CAS的全称为Compare-And-Swap它是一条CPU并发原语,也就是在CPU硬件层面上来说比较并且判断是否设置新值这段操作是原子性的,不会被其他线程所打断.在JAVA并发包ja ...

  5. sift代码实现详解

    1.创建高斯金字塔第-1组 1.1.将源图片转成灰度图 void ConvertToGray(const Mat& src, Mat& dst) { cv::Size size = s ...

  6. canvas-文字粒子化(小程序)

    有2张画板,1张渲染文字为获取文字数组,另一张用来渲染粒子根据拿到的数组. step1:渲染文字,根据canvasGetImageData拿到rgba数组 step2:遍历rgba数组拿到粒子的坐标 ...

  7. ZOJ1310-Robot (BFS)

    The Robot Moving Institute is using a robot in their local store to transport different items. Of co ...

  8. 题解【洛谷P1896】[SCOI2005]互不侵犯

    题面 棋盘类状压 DP 经典题. 我们考虑设 \(dp_{i,j,s}\) 表示前 \(i\) 行已经摆了 \(j\) 个国王,且第 \(i\) 行国王摆放的状态为 \(s\) 的合法方案数. 转移的 ...

  9. Vue中v-show和v-if的使用以及区别

    个人博客 地址:http://www.wenhaofan.com/article/20190321143330 v-if 1.v-if 根据条件渲染,它会确保在切换过程中条件块内的组件销毁和重建    ...

  10. 使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式

    首先代码是这个样子的,使用v-model <el-date-picker v-model="formData.createTime" :disabled="true ...