今天这篇我们来学习和了解“element代码弹窗问题的原因和解决步骤”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“element代码弹窗问题的原因和解决步骤”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

目录

• 背景
• 问题分析
• 产生的原因
• 所以产生这样的根本原因是什么呢？
• 解决的办法

背景

有一个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之旅啊！

以上就是弹窗表格的字体模糊bug解决的详细内容，更多关于弹窗表格字体模糊bug的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

• vue 解决mintui弹窗弹起来,底部页面滚动bug问题
• element ui 表格动态列显示空白bug 修复方法
• Vue基于Element-ui实现表格弹窗组件
• WPF字体或内容模糊的解决方法

到此，关于“element代码弹窗问题的原因和解决步骤”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中如何创建二维数组，有什么坑要注意

  二维数组本质上是以数组作为数组元素的数组，即"数组的数组"，类型说明符 数组名[常量表达式][常量表达式]。二维数组又称为矩阵，行列数相等的矩阵称为方阵。对称矩阵a[i][j] = a[j][i]，对角矩阵:n阶方阵主对角线外都是零元素

• React项目中怎么实现文件表单提交，代码是什么

  最近在做一个后台管理项目，涉及到react相关知识，项目需求需要在表单中带附件提交，怎么实现这个功能呢？下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能，一起看看吧

• 用Element-UI如何做下拉多选框，添加全部选项怎么实现

  因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript回调函数怎样运作，基本原理是什么

  在JavaScript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。

• JS如何改变元素宽高，方法是什么？

  这篇文章给大家分享的是JS改变元素宽高的方法。这里使用到的是setAttribute() ，能用于添加指定的属性，并为其赋指定的值，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。