element弹窗表格的字体模糊bug解决

背景

有一个BUG，就是在使用element弹窗表格的字体异常的模糊。如下图：

这个问题其实已经存在很久了。客户屡有反馈，但是不多。我们基本自测也没有重现过，而且改问题并不影响流程。所以就一直挂着未解决。

直到领导的电脑也出现了这个问题，作为一向是面向领导开发的我，这个问题是必须要解决了。

问题分析

猜测是字体的问题，但是弹窗并没有单独使用额外的字体，别的地方都没有出现，而且字体也不是你想要改就能改的，有统一的规范。排除。

鉴于我公司给予员工的电脑太垃圾，并且浏览器还很占性能，所以猜测，是浏览器在渲染DOM的时候出了问题。不予解决，提升电脑配置去。但是测试那边是提升过的电脑，依旧出现这个问题。逐排除。

其实不管是由什么引起的，必然都是浏览器渲染的问题，这是一句正确的废话。

既然是使用element的弹窗和表格引起的，所以这个是否是element自身的问题。然后在谷歌搜索框中，在element的issue中，寻找可能的问题，一无所获。暂时排除。

或许是样式的问题？一开始就看过这部分的样式，相当的简单和常见：

.#{namespace}-wrap { 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}

面试必考题。在我从事web前端两年开发中，用了无数遍，从来没有问题。带着transform和字体模糊的关键字到搜索框中。居然真的发现了问题的答案。

产生的原因

收集了一下网上的情况，总结如下：

当表格的数据量大的时候，并且出现了滚动条

当我们在使用"transform" 中的"translate()" 或者"scale()" 之后，并且在经过计算后的值不是整数。

不过到也不是一定会出现这样的问题，所以是充分非必要的条件。也就是说，当出现了字体模糊的时候，它的值是这样的情况。

给予dom的背景图添加一个旋转角度"transofrm: rotate(30deg)," 会导致背景图上面的字体模糊。

像我们公司这样的垃圾屏幕。瞎眼的1080P

chromium内核的浏览器和Safari具有一样的问题，火狐浏览器没有听说，用的人少？

和谷歌浏览器的版本有关系么？

• 可以说没有关系。在我手机资料的过程中，发现从45版本的Chrome到105版本的Chorme的出现这个问题。
• 也就是说，这么多年谷歌一直的没有解决这个问题

所以产生这样的根本原因是什么呢？

由于浏览器将图层拆分到 GPU 以进行 3D 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的精确。

就算是中文我也不懂

So this issue is still around since 2014 at least! please do something?

By the way, the blur is cause by subpixel values not being rendered by the display, because its density its not compatible and such thing as half a pixel does not exists?

This effect can be also seen on this issue (when using css animations/transitions like translations 50%)

英文的，更看不懂了。就知道在吐槽

解决的办法

不就是为了垂直居中嘛？我有一百种方法来实现，不用你这个"transform" 。

用"flex"、用"margin: 0 auto;" 、用"display: box;" 、用"display: table"

验证可行。

保证弹窗的高宽为偶数。这样"transform的translate(-50%, -50%)" 也是是偶数。

可以用JS来进行判断，弹窗宽高为奇数的时候，手动给它们加1。

添加"-webkit-transform: rotate(45deg)translate3d(0, 0, 0)" 改变chrome的渲染模式，可以改善。

似乎可行。由于字体模糊现象在自己的电脑实在无法必须，所以没有办法判断是不是这个属性起的作用。

隐藏滚动条。

这个我没有尝试，感觉有点傻。

叫用户换浏览器，火狐浏览器我全网搜索都没有说有这个问题。

更换高清显示器。

这真是一次有趣的解BUG之旅啊！