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

前言

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.模糊内容取消滚动条