在我们的页面中,经常会出现这样的问题,一块区域内的文本或者边框,在展示的时候,变得特别的模糊,如下(数据经过脱敏处理):

正常而言,应该是这样的:

emmm,可能大图不是很明显,我们取一细节对比,就非常直观了:

何时触发这种现象?

那么?什么时候会触发这种问题呢?在 Google 上,其实我们能搜到非常多类似的案例,总结而言:

  1. 当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale()transform 操作时,容易出现这种问题

当然,这只是必要条件,不是充分条件。继续深入探究,会发现,必须还得同时满足一些其它条件:

  1. 元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数

譬如,上述案例触发的 CSS 代码如下:

.container {
position: absolute;
width: 1104px;
height: 475px;
top: 50%;
transform: translateY(-50%);
// ...
}

由于元素的高度为 475pxtranslateY(-50%) 等于 237.5px,非整数,才导致了内部的字体模糊。

但是,需要注意的是,并非所有产生的非整数都会导致了内部的字体模糊。

这里有个简单的示意:

还是上述的例子,当高度从 477px 一直调整到 469px 的过程中,只有 477px475px 导致了模糊,而 473, 471, 469 则没有。所以,这也只是引发模糊的一个必要条件。

  1. 文本内容是否模糊还与屏幕有关,高清屏(dpr > 2)下不容易触发,更多发生在普通屏幕下(dpr = 1)

在我实测的过程中还发现,这个现象基本只会发生在 dpr 为 1 的普通屏幕下。

类似于 MAC 的高清屏幕则不太会触发这个问题。

dpr = 物理像素 / 设备独立像素,表示设备像素比。这个与我们通常说的视网膜屏(多倍屏,Retina屏)有关。设备像素比描述的是未缩放状态下,物理像素和设备独立像素的初始比例关系。

  1. 并非所有浏览器都是这个表现,基本发生在 chromium 内核。

为何发生这种现象呢?

那么,为何会发生这种现象?针对这个问题,没有找到特别官方的回答,普遍的认为是因为:

由于浏览器将图层拆分到 GPU 以进行 3D 转换,而非整数的像素偏移,使得 Chrome 在字体渲染的时候,不是那么的精确

关于这个问题,感兴趣的可以再看看这两个讨论:

如何解决?

那么针对这个问题,我们该如何解决呢?社区里给出的一种方案:

  1. 给元素设置 -webkit-font-smoothing: antialiased

font-smooth CSS 属性用来控制字体渲染时的平滑效果,该特性是非标准的,我们应该尽量不要在生产环境中使用它。并且在我的实测中,这个方法不太奏效。

  1. 保证运用了 transform: translate() 或者 transform: scale() 的元素的高宽为偶数

如果你赋予给元素的 transform 的值非常明确,譬如我上文例子中的利用其来对元素进行水平垂直居中 -- transform: translate(-50%, -50%),让元素的高宽为偶数这个方法是可行的,但如果当你无法确定transform 的值,譬如 transform: translateX(-31.24%) 或者是 transform: scale(1.05)`,那这个方法依旧无法奏效。

  1. 弃用 transform

如果这个问题对你的页面非常致命,那么只能弃用 transform,寻找替代方案。大部分的时候,我们还是可以找到不使用 transform 的替代方案的。

总结一下,本文简单探究了在 Chromium 内核下,使用了 transform 导致内部文本模糊的现象,并且给出了一些可尝试的解决方案,实际遇到,需要多加调试,尝试最优的解决方案。

最后

好了,本文到此结束,希望本文对你有所帮助

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

疑难杂症:运用 transform 导致文本模糊的现象探究的更多相关文章

  1. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  2. CSS3 translate导致字体模糊

    今日客户反馈,发现 使用了 translate会导致字体模糊. .media-body-box{ @media all and (min-width: 992px){ position: absolu ...

  3. transform:translateZ() 字体模糊问题 父类重返Z轴平面

    translateZ()变糊 第一种情况: 当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关, 这个 css中 ...

  4. 打开Voice Over时,CATextLayer的string对象兼容NSString和NSAttributedString导致的Crash(一现象)

    一.现象:iPhone真机打开Voice Over的情况下,iPhone QQ空间工程,Xcode 真机编译启动必Crash,main函数里面 NSSetUncaughtExceptionHandle ...

  5. <20190102>收录些比较低级错误导致的主板故障现象

    今天收录俩个比较低级的错误. 故障现象:   水冷排风扇高速运转, 并无法调控. 现在CPU散热的水冷排都设计了三条线,   温控4Pin , 水泵线 3Pin  , 接在机箱上USB口取电的灯线或者 ...

  6. Word插入htm文件导致文本域动态增加的一个问题

    受html标签影响,超链接也会被变成文本域(HYPERLINK).当遍历文本域进行替换之前如果预存了文本域的数量(Count/Length/etc.)将导致遗漏.

  7. [WPF]DropShadowEffect导致Image模糊问题

    实现鼠标在图片上时,图片外侧有发光效果,如上图 可使用触发器修改Image控件的Effect属性 <Style.Triggers> <Trigger Property="I ...

  8. wpf 加阴影效果导致内容模糊的问题解决

    这个和GPU有关,参考地址 https://www.cplotts.com/2009/02/25/gpu-effects-blurry-text/ 产生问题的代码如下: <Window x:Cl ...

  9. 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行

    在标签的style 属性中设置 word-break style="word-break:break-all;" 这样就可以实现换行 上截图没设置之前 设置之后 完美解决!!!!! ...

随机推荐

  1. SSR远程密码修改

    第一:输入passwd 第二:填入旧密码 ,随后会有新密码设置 第三:回车两次就行了.

  2. redis 主从复制实现

    Redis 主从复制的实现 安装redis 修改redis的配置文件 redis.conf ②开启daemonize yes ③Pid文件名字 ④指定端口 ⑤Log文件名字 ⑥Dump.rdb名字 在 ...

  3. [BZOJ2761] [JLOI2011] 不重复数字 (C++ STL - set)

    不重复数字 题目:         给出N个数,要求把其中重复的去掉,只保留第一次出现的数.例如,给出的数 为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 1 ...

  4. MongoDB-基础知识学习(一)

    概述 最近mongodb在互联网的活跃度直线上升,并且我们公司也使用了mongoDB 3.6 作为生产重要的数据库,我们项目组要监控mongodb的op.log日志,在此整理以前学习的知识,为以后备份 ...

  5. IDEA导入Web项目配置Tomcat启动

    1.导入项目 2.配置project 3.导入项目模块 配置Models 4.配置Libraries 5. 6. 7.配置tomcat

  6. RDA5807M开发指南 & 开源库函数

    文档标识符:RDA5807M_T-D-P16 作者:DLHC 最后修改日期:2022.1.14 最后修改内容:修改.添加内容 发布状态:已发布 本文链接:https://www.cnblogs.com ...

  7. 《剑指offer》面试题52. 两个链表的第一个公共节点

    问题描述 输入两个链表,找出它们的第一个公共节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], lis ...

  8. Solon Web 开发,十四、与Spring、Jsr330的常用注解对比

    Solon Web 开发 一.开始 二.开发知识准备 三.打包与运行 四.请求上下文 五.数据访问.事务与缓存应用 六.过滤器.处理.拦截器 七.视图模板与Mvc注解 八.校验.及定制与扩展 九.跨域 ...

  9. 【刷题-LeetCode】207. Course Schedule

    Course Schedule There are a total of numCourses courses you have to take, labeled from 0 to numCours ...

  10. 【计算机理论】CSAPP ch2

    信息存储 十六进制表示法 (略) 字数据大小 大多数计算机使用8bit的块(字节)作为最小的可寻址的内存单元 字长指明了指针数据的标称大小(?) 64位系统和32位系统向后兼容 C语言中有些数据类型的 ...