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之旅啊!

以上就是弹窗表格的字体模糊bug解决的详细内容,更多关于弹窗表格字体模糊bug的资料请关注我们其它相关文章!

(0)

相关推荐

  • WPF字体或内容模糊的解决方法

    本文会给大家介绍尝试过的一些方法,大家可以一起看看. 1.用WPF4.0中的新字体渲染方法,没有改善 <Setter Property="TextOptions.TextFormattingMode" Value="Display" /> <Setter Property="TextOptions.TextRenderingMode" Value="ClearType" /> 2.给控件加上SnapsT

  • Vue基于Element-ui实现表格弹窗组件

    本文实例为大家分享了Vue基于Element-ui实现表格弹窗组件的具体代码,供大家参考,具体内容如下 效果图 使用方式 acTable1 () {   this.$modalTable({     title: "表格一",     tableData: [{       date: '2016-05-02',       name: '王小虎',       address: '上海市普陀区金沙江路 1518 弄'     }, {       date: '2016-05-04'

  • vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    经过dom层层注释缩小反馈终于找到问题所在. 问题经过 我在弹起弹窗的时候,设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数 然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘 然后就导致了底部页面向上滚动 解决办法 去掉updated函数里面的重绘方法 补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结 说实话,使用Mint-ui这个ui组件的过程中遇到了

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

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

    目录 背景 问题分析 产生的原因 所以产生这样的根本原因是什么呢? 解决的办法 背景 有一个BUG,就是在使用element弹窗表格的字体异常的模糊.如下图: 这个问题其实已经存在很久了.客户屡有反馈,但是不多.我们基本自测也没有重现过,而且改问题并不影响流程.所以就一直挂着未解决. 直到领导的电脑也出现了这个问题,作为一向是面向领导开发的我,这个问题是必须要解决了. 问题分析 猜测是字体的问题,但是弹窗并没有单独使用额外的字体,别的地方都没有出现,而且字体也不是你想要改就能改的,有统一的规范.

  • Element实现表格嵌套、多个表格共用一个表头的方法

    一.分析需求 这里先上一张图说明 需求 : 根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default . free 和 pay 三个属性,且这三个都是数组格式.): 渲染出一个这样子的 表格 : res 数据: res 的每一个元素的直接属性 name (即为邮费模板名称,比如成都运费模板), res 的 ext 属性下的三个数组 default . free . pay ,每一个数组要大的一行(这一行中,第一列是运送到的地

  • vue element实现表格合并行数据

    本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" //添加这个实

  • element el-table表格的二次封装实现(附表格高度自适应)

    前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多个页面使用相同的功能,就要多次重复写逻辑上差不多的代码,所以打算对表格这个组件进行封装,将相同的代码和逻辑封装在一起,把不同的业务逻辑抽离出来.话不多说,下面就来实现一下吧. 一.原生el-tbale代码--简单の封装 这里直接引用官方的基础使用模板,直接抄过来(✪ω✪),下面代码中主要是抽离html部分,可以看出每个el-table-column

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • element Table表格组件多字段(多列)排序方法

    目录 需求: 遇到的问题: 解决: 需求: element表格多列排序,点击日期的排序,然后再点击姓名的排序,将两个排序字段传给后端排序 遇到的问题: element的Table组件只支持单列排序,当你点击另一列的排序的时候,会自动取消上一个排序.网上搜了一下方法,这篇文章提出用:header-cell-class-name 和 @sort-change来处理多列排序的样式问题,我试了半天,发现这个sort-change事件在取消排序的时候会返回null,使我根本定位不到是哪一列取消了排序,总而

  • 关于element ui 表格中的常见特殊属性说明

    目录 1,表格内容太多用…表示 2,修改element ui自带的样式 3,修改奇数行背景色 4,给表头添加背景色及文字样式 5,表头文字竖向排列(文字带括号) 6,表头边框与文本边框对不齐情况 7,导航栏的侧边栏只展开一个下拉菜单 8,表格表头和内容居中显示 9,添加表格背景色 10,鼠标移入表格高亮显示当前行 element ui 表格的常见特殊属性 1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字

  • Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    本文实例讲述了Thinkphp中volist标签mod控制一定记录的换行BUG解决方法.分享给大家供大家参考.具体方法如下: 一.BUG描述: 存在于thinkphp 2.0 版本 Mod属性还用于控制一定记录的换行,例如: 复制代码 代码如下: <volist name="list" id="vo" mod="5" > {$vo.name} <eq name="mod" value="4"

随机推荐