广告位联系
返回顶部
分享到

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

JavaScript 来源:互联网 作者:佚名 发布时间:2023-10-30 22:39:00 人浏览
摘要

有一个BUG,就是在使用element弹窗表格的字体异常的模糊。如下图: 这个问题其实已经存在很久了。客户屡有反馈,但是不多。我们基本自测也没有重现过,而且改问题并不影响流程。

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

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

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

问题分析

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

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

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

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

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

1

2

3

4

5

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • WebComponent使用教程介绍

    WebComponent使用教程介绍
    WebComponent 是官方定义的自定义组件实现方式,它可以让开发者不依赖任何第三方框架(如Vue,React)来实现自定义页面组件;达到组件复用
  • element plus的样式修改和扩展实例介绍
    一、用户故事 我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个UI组件库。而公司的UI组件库又出基于element ui的。 公司的
  • element弹窗表格的字体模糊bug解决方法

    element弹窗表格的字体模糊bug解决方法
    有一个BUG,就是在使用element弹窗表格的字体异常的模糊。如下图: 这个问题其实已经存在很久了。客户屡有反馈,但是不多。我们基本自测
  • 如何在JavaScript中使用媒体查询介绍

    如何在JavaScript中使用媒体查询介绍
    说起媒体查询想必大家最先想到的都是CSS中@media,没错,这是我们最常用的媒体查询方法,主要用来为我们的网站做适配处理。 比如: 1
  • js二进制数据及其互相转化的实现
    file 在js中有很多二进制数据,有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的,我们这篇文章就
  • JS实现简单的操作杆旋转示例介绍

    JS实现简单的操作杆旋转示例介绍
    JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转。 鼠标移出控制区域,控制球复位
  • smartbanner.js实现可定制智能应用横幅使用示例
    smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用,不依赖任何框架,怎么使用官方文档也写的很清楚,我就不
  • js的一些潜在规则使用介绍

    js的一些潜在规则使用介绍
    为什么开发中建议使用void 0 来代替undefined 因为 JavaScript 的代码 undefined 是一个变量,而并非是一个关键字,这是JavaScript 语言公认的设计失
  • 基于JavaScript实现图片滤镜效果介绍
    随着社交媒体的普及,人们对于图片的处理需求越来越高。图片滤镜效果成为了许多人喜爱的功能之一。在本文中,我们将学习如何使用
  • smartbanner.js实现可定制智能应用横幅使用介绍
    smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用,不依赖任何框架,怎么使用官方文档也写的很清楚,我就不
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计