疑难杂症:运用 transform 导致文本模糊的现象探究
在我们的页面中,经常会出现这样的问题,一块区域内的文本或者边框,在展示的时候,变得特别的模糊,如下(数据经过脱敏处理):
正常而言,应该是这样的:
emmm,可能大图不是很明显,我们取一细节对比,就非常直观了:
何时触发这种现象?
那么?什么时候会触发这种问题呢?在 Google 上,其实我们能搜到非常多类似的案例,总结而言:
- 当文本元素的某个祖先容器存在
transform: translate()
或者transform: scale()
等transform
操作时,容易出现这种问题
当然,这只是必要条件,不是充分条件。继续深入探究,会发现,必须还得同时满足一些其它条件:
- 元素作用了
transform: translate()
或者transform: scale()
后的计算值产生了非整数
譬如,上述案例触发的 CSS 代码如下:
.container {
position: absolute;
width: 1104px;
height: 475px;
top: 50%;
transform: translateY(-50%);
// ...
}
由于元素的高度为 475px
,translateY(-50%)
等于 237.5px
,非整数,才导致了内部的字体模糊。
但是,需要注意的是,并非所有产生的非整数都会导致了内部的字体模糊。
这里有个简单的示意:
还是上述的例子,当高度从 477px
一直调整到 469px
的过程中,只有 477px
和 475px
导致了模糊,而 473, 471, 469
则没有。所以,这也只是引发模糊的一个必要条件。
- 文本内容是否模糊还与屏幕有关,高清屏(dpr > 2)下不容易触发,更多发生在普通屏幕下(dpr = 1)
在我实测的过程中还发现,这个现象基本只会发生在 dpr 为 1 的普通屏幕下。
类似于 MAC 的高清屏幕则不太会触发这个问题。
dpr = 物理像素 / 设备独立像素,表示设备像素比。这个与我们通常说的视网膜屏(多倍屏,Retina屏)有关。设备像素比描述的是未缩放状态下,物理像素和设备独立像素的初始比例关系。
- 并非所有浏览器都是这个表现,基本发生在 chromium 内核。
为何发生这种现象呢?
那么,为何会发生这种现象?针对这个问题,没有找到特别官方的回答,普遍的认为是因为:
由于浏览器将图层拆分到 GPU 以进行 3D 转换,而非整数的像素偏移,使得 Chrome 在字体渲染的时候,不是那么的精确。
关于这个问题,感兴趣的可以再看看这两个讨论:
- Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.
- Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275
如何解决?
那么针对这个问题,我们该如何解决呢?社区里给出的一种方案:
- 给元素设置
-webkit-font-smoothing: antialiased
font-smooth
CSS 属性用来控制字体渲染时的平滑效果,该特性是非标准的,我们应该尽量不要在生产环境中使用它。并且在我的实测中,这个方法不太奏效。
- 保证运用了
transform: translate()
或者transform: scale()
的元素的高宽为偶数
如果你赋予给元素的 transform
的值非常明确,譬如我上文例子中的利用其来对元素进行水平垂直居中 -- transform: translate(-50%, -50%)
,让元素的高宽为偶数这个方法是可行的,但如果当你无法确定transform
的值,譬如 transform: translateX(-31.24%)
或者是 transform: scale(1.05)`,那这个方法依旧无法奏效。
- 弃用
transform
如果这个问题对你的页面非常致命,那么只能弃用 transform
,寻找替代方案。大部分的时候,我们还是可以找到不使用 transform
的替代方案的。
总结一下,本文简单探究了在 Chromium 内核下,使用了 transform
导致内部文本模糊的现象,并且给出了一些可尝试的解决方案,实际遇到,需要多加调试,尝试最优的解决方案。
最后
好了,本文到此结束,希望本文对你有所帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
疑难杂症:运用 transform 导致文本模糊的现象探究的更多相关文章
- css: transform导致文字显示模糊
css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
- CSS3 translate导致字体模糊
今日客户反馈,发现 使用了 translate会导致字体模糊. .media-body-box{ @media all and (min-width: 992px){ position: absolu ...
- transform:translateZ() 字体模糊问题 父类重返Z轴平面
translateZ()变糊 第一种情况: 当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关, 这个 css中 ...
- 打开Voice Over时,CATextLayer的string对象兼容NSString和NSAttributedString导致的Crash(一现象)
一.现象:iPhone真机打开Voice Over的情况下,iPhone QQ空间工程,Xcode 真机编译启动必Crash,main函数里面 NSSetUncaughtExceptionHandle ...
- <20190102>收录些比较低级错误导致的主板故障现象
今天收录俩个比较低级的错误. 故障现象: 水冷排风扇高速运转, 并无法调控. 现在CPU散热的水冷排都设计了三条线, 温控4Pin , 水泵线 3Pin , 接在机箱上USB口取电的灯线或者 ...
- Word插入htm文件导致文本域动态增加的一个问题
受html标签影响,超链接也会被变成文本域(HYPERLINK).当遍历文本域进行替换之前如果预存了文本域的数量(Count/Length/etc.)将导致遗漏.
- [WPF]DropShadowEffect导致Image模糊问题
实现鼠标在图片上时,图片外侧有发光效果,如上图 可使用触发器修改Image控件的Effect属性 <Style.Triggers> <Trigger Property="I ...
- wpf 加阴影效果导致内容模糊的问题解决
这个和GPU有关,参考地址 https://www.cplotts.com/2009/02/25/gpu-effects-blurry-text/ 产生问题的代码如下: <Window x:Cl ...
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行
在标签的style 属性中设置 word-break style="word-break:break-all;" 这样就可以实现换行 上截图没设置之前 设置之后 完美解决!!!!! ...
随机推荐
- 浅讲EF高级用法之自定义函数
介绍 好久没给大家更新文章了,前2个月因家庭原因回到青岛,比较忙所以没有什么时间给大家更新知识分享,这2个月在和同事一起做项目,发现了很多好意思的东西拿出来给大家讲一讲. 正文 大家先来下面这幅图,这 ...
- 《剑指offer》面试题57 - II. 和为s的连续正数序列
问题描述 输入一个正整数 target ,输出所有和为 target 的连续正整数序列(至少含有两个数). 序列内的数字由小到大排列,不同序列按照首个数字从小到大排列. 示例 1: 输入:target ...
- Java学习小总结
本学期主要学习Java程序语言及Javaweb相关知识,其中有相当一部分内容是暑假假期的学习内容,以下主要介绍一些Javaweb学习的总结. 以下教程均为个人建议(当然,适合自己的最好) 一.环境配置 ...
- IExposedPropertyTable与ExposedReference的使用
近期回顾Dead of the Book demo时,看见了它们的运用.感觉主要是用于ScriptableObject资源和Scene资源解耦: 并将这类做法规范化. 做一个小测试,IExposedP ...
- blender建模常用建模快捷键
编辑物体 M2选取 M2+SHIFT选取多个 A全选 B+M1矩阵选择 C+M1笔刷选择 CTRL+M1套索选择 CTRL+SHIFT+M1取消套索选择 ALT+M2选择边循环,面 CTRL+ALT+ ...
- 话说C#程序员人手一个ORM
话说C#程序员人手一个ORM,确实没有必要再写ORM了,不过我的ORM并不是新的,是从DBHelper演化过来的,算是DBHelper魔改版. 目前流行的ORM有EF.Dapper.SqlSugar. ...
- 小程序循环时的item问题
平常在做小程序时,比如循环渲染数据时,如果有多个数据层次,一般都会这样 wx:for-item=item2,它的意思只是简单的起了一个wx:for循环值的别名,不是表示循环item2,index2同理 ...
- GeoServer课程规划
"凡事豫则立,不豫则废." --西汉·戴圣<礼记·中庸> 为了做好GeoServer课程培训,需要拟定一个课程目录,对整个课程做一个宏观上的规划.有了这个规划,就有了目 ...
- 2022年写的香橙派 OrangePi Zero 用python获取dht11温度和湿度
感谢网上资料和个人的不放弃,终于方便的解决了香橙派 OrangePi Zero用python获取dht11温湿度的问题. 网上关于香橙派的资料比起树莓派真是少之又少,现在香橙派zero能干的活暂时也只 ...
- Servlet中的Filter 过滤器的简单使用!
package com.aaa.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servle ...