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

参考文档

stackoverflow blurry-text-on-transformrotate-in-chrome

转载于:https://www.cnblogs.com/gaollard/p/10005591.html

css: transform导致文字显示模糊相关推荐

css transform导致字体像素模糊的问题解决办法（多种方法，亲测有效）
css transform导致字体像素模糊的问题解决办法通过 transform:translate(X,Y) 偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题,因 ...
css transform导致字体像素模糊的问题解决办法
通过 transform:translate(X,Y) 偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题 1.给字体加多一个父级原本字体的父级为列子中的popup- ...
CSS设置溢出文字显示省略号
CSS设置溢出文字显示省略号相关CSS .text-ellipse{ width: 100px;height:50px;border:2px solid red;overflow:hidden;te ...
css：浏览器中文字显示模糊的原因及处理方案
// 奇数像素可能导致浏览器渲染失真 1. 字体size为奇数导致,如font-size: 13px; 处理方案:改为偶数// transform移动后可能导致浏览器渲染失真 2. transform ...
div css每行文字显示一半同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...
qml在部分windows7上文字显示模糊的问题
qml在本机运行时显示正常,但是文字部分windows 7上显示模糊,功能和图片没什么问题,所以猜测是渲染文字的原因解决方法 Text { renderType: Text.NativeRender ...
html如何实现字体重叠,div css每行文字显示一半同时文字字体重叠显示不全解决方法...
CSS DIV机关中泛起单行或多行笔墨的每行笔墨内容不克不及体现全,上上行笔墨有一点点堆叠景象,笔墨字体只闪现一半经管门径,在低版本IE分外明显笔墨字体表示不全,在google涉猎器等高版本IE阅读器 ...
wps的linux文字显示模糊,WPS字体模糊怎么办一步到位了解一下
WPS字体模糊怎么办?虽然现在已经2020了,但是不妨碍很多人还在用XP系统,就像很多人也比较钟爱WIN7一样,但是有些网友用XP打开WPS的时候,有时候会发现字体不是很清楚,这是为什么呢?别慌,这只 ...
手机分辨率导致文字显示不完整的问题
1. 你手机的分辨率大,软件支持的分辨率小就会出现部分屏幕局部黑屏, 如果软件支持的分辨率大于你的手机,那要么就不能显示就算能显示也只显示局部. 2. 分辨率320×480的意思是水平像素数为320个 ...

css: transform导致文字显示模糊

css: transform导致文字显示模糊

元素高度的影响

当translateY是绝对单位时不会模糊

解决办法

参考文档

css: transform导致文字显示模糊相关推荐

最新文章

热门文章