前言

1.在复现过程中发现FireFox并不会出现模糊的问题，而Chrome和新版Edge会有，并且是在有滚动条时才会模糊
2.文本内容是否模糊还与屏幕有关，高清屏（dpr > 2）下不容易触发，更多发生在普通屏幕下（dpr = 1）

何时触发这种现象？

----当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时，容易出现这种问题。
当然，这只是必要条件，不是充分条件。继续深入探究，会发现，必须还得同时满足一些其它条件：
元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数

解决办法

1.保证运用了 transform: translate() 或者 transform: scale() 的元素的高宽为偶数
2.弃用 transform
3.模糊内容取消滚动条

transform: translate(-50%,-50%)导致的像素（前端页面字体模糊）模糊问题解决办法相关推荐

css transform导致字体像素模糊的问题解决办法（多种方法，亲测有效）
css transform导致字体像素模糊的问题解决办法通过 transform:translate(X,Y) 偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题,因 ...
android 屏幕旋转不重新加载,Android webview旋转屏幕导致页面重新加载问题解决办法...
Android webview旋转屏幕导致页面重新加载问题解决办法 1. 在create时候加个状态判断 protected void onCreate(Bundle savedInstanceSta ...
css transform导致字体像素模糊的问题解决办法
通过 transform:translate(X,Y) 偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题 1.给字体加多一个父级原本字体的父级为列子中的popup- ...
前端页面字体小于12px
前端页面最小为12px,如果设置12px一下,浏览器会默认将字体变为12px,有时候有的需求需要12px以下的字体,需要使用css的 transform属性 font-size: 12px; tra ...
坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法
首选这个问题出现在我们一个h5页面的首页上,滑不动!在iPhone X和iPhone 11上并且系统版本发现是13.2.2,而iPhone X Max 系统版本12.2的并没有出现.所以我估摸着应 ...
个人笔记_前端_css-transform:translate(-50%,-50%)实现不知自身宽高下的水平居中
transform:translate(-50%,-50%)是css3的新特性在需要进行水平居中时,例如toast弹出居中.使用 position: fixed; top: 50%; left: 5 ...
50个好用的前端框架，千万收好以留备用!
来源 | https://www.jianshu.com/p/182b69e54fe8 今天跟你分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地 ...
50个好用的前端工具，建议收藏!
来源 | https://www.jianshu.com/p/182b69e54fe8 今天跟你分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地 ...
【CSS3 属性】CSS 3 transform:scale 与 transform:translate 作用在同一div元素，导致元素位置偏离
div 元素使用transform:translate(x,y)居中显示,并使用transform:scale(z)作为动画属性,导致transform:translate(x,y)失效效果如下图: ...

transform: translate(-50%,-50%)导致的像素（前端页面字体模糊）模糊问题解决办法

前言

何时触发这种现象？

解决办法

transform: translate(-50%,-50%)导致的像素（前端页面字体模糊）模糊问题解决办法相关推荐

最新文章

热门文章