移动端 1px 边框模糊、页面模糊问题

参考文章: https://zhuanlan.zhihu.com/p/470111639

问题

图1 是展示有问题、模糊的，图2 是正常的，清晰的

其实不仅是 1px 边框模糊，严重的时候，整个页面都能看见明显的文字、图片模糊

原因

非整数尺寸

某个父元素设置了 transform: translate(x, x, x) scale(x, x, x) 相关动画变形属性，但是计算值产生了非整数

比如以下常用的元素水平垂直居中方式：

width: 100px
height: 75px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

计算的 75px * -50% = 37.5px，非整数，才导致了内部的边框、字体等元素模糊

屏幕素质

高清屏（dpr > 2），不容易存在，更容易发生在普通屏幕下（dpr = 1）

解决办法

通过 CSS 修改元素尺寸，精确计算、设置为偶数数值尺寸，注意以下影响元素高度、宽度尺寸的元素即可

width: xxx;
height: xxx;
line-height: xxx;
border-bottom: xxx;
border-top: xxx;