|
背景
有一个BUG,就是在使用element弹窗表格的字体异常的模糊。如下图:
这个问题其实已经存在很久了。客户屡有反馈,但是不多。我们基本自测也没有重现过,而且改问题并不影响流程。所以就一直挂着未解决。
直到领导的电脑也出现了这个问题,作为一向是面向领导开发的我,这个问题是必须要解决了。
问题分析
猜测是字体的问题,但是弹窗并没有单独使用额外的字体,别的地方都没有出现,而且字体也不是你想要改就能改的,有统一的规范。排除。
鉴于我公司给予员工的电脑太垃圾,并且浏览器还很占性能,所以猜测,是浏览器在渲染DOM的时候出了问题。不予解决,提升电脑配置去。但是测试那边是提升过的电脑,依旧出现这个问题。逐排除。
其实不管是由什么引起的,必然都是浏览器渲染的问题,这是一句正确的废话。
既然是使用element的弹窗和表格引起的,所以这个是否是element自身的问题。然后在谷歌搜索框中,在element的issue中,寻找可能的问题,一无所获。暂时排除。
或许是样式的问题?一开始就看过这部分的样式,相当的简单和常见:- .#{namespace}-wrap {
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
复制代码 面试必考题。在我从事web前端两年开发中,用了无数遍,从来没有问题。带着和字体模糊的关键字到搜索框中。居然真的发现了问题的答案。
产生的原因
收集了一下网上的情况,总结如下:
当表格的数据量大的时候,并且出现了滚动条
当我们在使用"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之旅啊!
以上就是弹窗表格的字体模糊bug解决的详细内容,更多关于弹窗表格字体模糊bug的资料请关注脚本之家其它相关文章!
来源:https://www.jb51.net/article/276367.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|