今天这篇我们来学习和了解“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 基于element-plus如何对组件二次封装

  基于element-plus的二次封装数据双向绑定在实际开发中，经常需要基于element-plus封装一些自己的定制化组件，方便快速构建我们当前的业务。在vue2.0中父子组件数据的双向绑定通

• vue中v-for循环对象及其键和值是怎样的

  这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助

• vue-cli输入命令vue ui没效果什么原因，如何处理

  这篇文章主要介绍了解决vue-cli输入命令vue ui没效果的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• Node.JS中如何获取Post请求的参数，代码是什么

  1.获取Get请求中url的参数：consturlib=require("url");//http:///www.web.com/Login?name=111&pass=222router.get('/Login',function(req,res,next){varmyObj=urlib.parse(req.url,true);

• node.js中间件类型有多少种？作用是什么？

  node.js中间件类型有多少种？node中间件就是封装在程序中处理http请求的功能，其类型包括应用级中间件、路由级中间件、内置中间件、第三方中间件、错误级中间件这几种，那么他们的作用分别是什么呢？接下来我们一起来了解一下。