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. vue自学入门-7（vue style scope）

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  2. Python通过paramiko批量远程主机执行命令

    一.前言 在日常运维的过程中,经常需要登录主机去执行一些命令,有时候需要登录一批主机执行相同的命,手动登录执行的化效率太慢, 所以可以通过Python的paramiko模块批量执行,本篇文章基于pyt ...

  3. HTTP 协议的 8 种请求类型介绍

    HTTP 协议的 8 种请求类型介绍 HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所 ...

  4. open_basedir的配置

    .user.ini的使用 1.限制目录访问 解锁: chattr -i .user.ini 加锁: chattr +i .user.ini .user.ini配置 open_basedir=/项目路径 ...

  5. java注释英语自动机翻

    一.简介 每次面试都被怼spring源码你看过吗?你用spring开发源码你都不看的吗?这样怎么开发?那我就下点决心,趁着现在疫情在家宅,我要看spring源代码.但是发现注释都是英文,勉勉强强能看懂 ...

  6. CSS一些特殊图形

    CSS一些特殊图形 CSS绘制三角形 通过控制元素的border属性可以实现三角形效果; 首先来设置4个边框, 为50px solid [color] color设置成不同的颜色值看一下效果 < ...

  7. Loj514「LibreOJ β Round #2」模拟只会猜题意 - 模拟

    注意初始化即可. #include <bits/stdc++.h> using namespace std; ],a[],t1,t2,t3,t4; int main(){ memset(a ...

  8. yii2表单提交CSRF验证

    Yii2表单提交默认需要验证CSRF,如果CSRF验证不通过,则表单提交失败,解决方法如下: 第一种解决办法是关闭Csrf public $enableCsrfValidation = false; ...

  9. Unity3D制作3D虚拟漫游场景（二）

    传送门: Unity3D制作3D虚拟漫游场景(一) -------------------------------------------------------------------------- ...

  10. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...