关于transform属性导致字体模糊的问题

Posted 2021-03-22 ybhome

最近写项目时也碰到了字体会模糊的情况，先简单描述一下问题

一个宽度固定但是高度auto的弹窗让他在屏幕当中展示（不能使用flex属性），

position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

用了以上代码让弹窗居中，后来发现有的情况会使文字显示的很模糊，感官很不舒服，

开始发现注释掉全局的padding ：0；能解决这个问题。后来发现padding不是这个问题的根源。

经过各种各样的尝试发现在元素高度为基数或小数时会出现这种情况，使得50%无法得到一个整数。

那解决这个问题就可以用已经几种方式解决

1.把弹框的宽高都设为整数，此案例不适用，因为高度要自适应

2.可以改变居中的方式

3.调节translate的值使视图能清晰

4.最后这种方法是偶然发现的，将fixed的定位方式换成absolute也可以解决