欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element彈窗表格的字體模糊bug解決

 更新時(shí)間:2023年02月24日 11:42:01   作者:砂糖橘加鹽  
這篇文章主要為大家介紹了element彈窗表格的字體模糊bug解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

背景

有一個(gè)BUG,就是在使用element彈窗表格的字體異常的模糊。如下圖:

這個(gè)問題其實(shí)已經(jīng)存在很久了。客戶屢有反饋,但是不多。我們基本自測(cè)也沒有重現(xiàn)過,而且改問題并不影響流程。所以就一直掛著未解決。

直到領(lǐng)導(dǎo)的電腦也出現(xiàn)了這個(gè)問題,作為一向是面向領(lǐng)導(dǎo)開發(fā)的我,這個(gè)問題是必須要解決了。

問題分析

猜測(cè)是字體的問題,但是彈窗并沒有單獨(dú)使用額外的字體,別的地方都沒有出現(xiàn),而且字體也不是你想要改就能改的,有統(tǒng)一的規(guī)范。排除。

鑒于我公司給予員工的電腦太垃圾,并且瀏覽器還很占性能,所以猜測(cè),是瀏覽器在渲染DOM的時(shí)候出了問題。不予解決,提升電腦配置去。但是測(cè)試那邊是提升過的電腦,依舊出現(xiàn)這個(gè)問題。逐排除。

其實(shí)不管是由什么引起的,必然都是瀏覽器渲染的問題,這是一句正確的廢話。

既然是使用element的彈窗和表格引起的,所以這個(gè)是否是element自身的問題。然后在谷歌搜索框中,在element的issue中,尋找可能的問題,一無(wú)所獲。暫時(shí)排除。

或許是樣式的問題?一開始就看過這部分的樣式,相當(dāng)?shù)暮?jiǎn)單和常見:

.#{namespace}-wrap { 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}

面試必考題。在我從事web前端兩年開發(fā)中,用了無(wú)數(shù)遍,從來(lái)沒有問題。帶著transform和字體模糊的關(guān)鍵字到搜索框中。居然真的發(fā)現(xiàn)了問題的答案。

產(chǎn)生的原因

收集了一下網(wǎng)上的情況,總結(jié)如下:

當(dāng)表格的數(shù)據(jù)量大的時(shí)候,并且出現(xiàn)了滾動(dòng)條

當(dāng)我們?cè)谑褂?quot;transform" 中的"translate()" 或者"scale()" 之后,并且在經(jīng)過計(jì)算后的值不是整數(shù)。

不過到也不是一定會(huì)出現(xiàn)這樣的問題,所以是充分非必要的條件。也就是說,當(dāng)出現(xiàn)了字體模糊的時(shí)候,它的值是這樣的情況。

給予dom的背景圖添加一個(gè)旋轉(zhuǎn)角度"transofrm: rotate(30deg)," 會(huì)導(dǎo)致背景圖上面的字體模糊。

像我們公司這樣的垃圾屏幕。瞎眼的1080P

chromium內(nèi)核的瀏覽器和Safari具有一樣的問題,火狐瀏覽器沒有聽說,用的人少?

和谷歌瀏覽器的版本有關(guān)系么?

  • 可以說沒有關(guān)系。在我手機(jī)資料的過程中,發(fā)現(xiàn)從45版本的Chrome到105版本的Chorme的出現(xiàn)這個(gè)問題。
  • 也就是說,這么多年谷歌一直的沒有解決這個(gè)問題

所以產(chǎn)生這樣的根本原因是什么呢?

由于瀏覽器將圖層拆分到 GPU 以進(jìn)行 3D 轉(zhuǎn)換,而非整數(shù)的像素偏移,使得 Chrome 在字體渲染的時(shí)候,不是那么的精確。

就算是中文我也不懂

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%)

英文的,更看不懂了。就知道在吐槽

解決的辦法

不就是為了垂直居中嘛?我有一百種方法來(lái)實(shí)現(xiàn),不用你這個(gè)"transform" 。

用"flex"、用"margin: 0 auto;" 、用"display: box;" 、用"display: table"

驗(yàn)證可行。

保證彈窗的高寬為偶數(shù)。這樣"transform的translate(-50%, -50%)" 也是是偶數(shù)。

可以用JS來(lái)進(jìn)行判斷,彈窗寬高為奇數(shù)的時(shí)候,手動(dòng)給它們加1。

添加"-webkit-transform: rotate(45deg)translate3d(0, 0, 0)" 改變chrome的渲染模式,可以改善。

似乎可行。由于字體模糊現(xiàn)象在自己的電腦實(shí)在無(wú)法必須,所以沒有辦法判斷是不是這個(gè)屬性起的作用。

隱藏滾動(dòng)條。

這個(gè)我沒有嘗試,感覺有點(diǎn)傻。

叫用戶換瀏覽器,火狐瀏覽器我全網(wǎng)搜索都沒有說有這個(gè)問題。

更換高清顯示器。

這真是一次有趣的解BUG之旅啊!

以上就是彈窗表格的字體模糊bug解決的詳細(xì)內(nèi)容,更多關(guān)于彈窗表格字體模糊bug的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • CheckBox 如何實(shí)現(xiàn)全選?

    CheckBox 如何實(shí)現(xiàn)全選?

    CheckBox 如何實(shí)現(xiàn)全選?...
    2006-06-06
  • 淺談JS正則RegExp對(duì)象

    淺談JS正則RegExp對(duì)象

    這篇文章主要介紹JS正則RegExp對(duì)象,正則表達(dá)式是描述字符模式的對(duì)象,用于對(duì)字符串模式匹配及檢索替換,是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。下面就來(lái)看具體詳情,需要的朋友可以參考一下
    2021-10-10
  • Javascript設(shè)計(jì)模式之原型模式詳細(xì)

    Javascript設(shè)計(jì)模式之原型模式詳細(xì)

    這篇文章主要介紹了Javascript設(shè)計(jì)模式之原型模式,原型模式用于在創(chuàng)建對(duì)象時(shí),通過共享某個(gè)對(duì)象原型的屬性和方法,從而達(dá)到提高性能、降低內(nèi)存占用、代碼復(fù)用的效果。下面小編將詳細(xì)介紹 ,需要的朋友可以參考下
    2021-09-09
  • Javascript中綁定click事件的四種方式介紹

    Javascript中綁定click事件的四種方式介紹

    今天小編就為大家分享一篇關(guān)于Javascript中綁定click事件的四種方式介紹,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧
    2018-10-10
  • js面試題繼承的方法及優(yōu)缺點(diǎn)解答

    js面試題繼承的方法及優(yōu)缺點(diǎn)解答

    這篇文章主要為大家介紹了js面試題繼承的方法及優(yōu)缺點(diǎn)解答,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • js解決移動(dòng)端滾動(dòng)穿透問題方案詳解

    js解決移動(dòng)端滾動(dòng)穿透問題方案詳解

    這篇文章主要為大家介紹了js解決移動(dòng)端滾動(dòng)穿透問題方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • svgicon組件使用方法示例詳解

    svgicon組件使用方法示例詳解

    這篇文章主要為大家介紹了svgicon組件使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 微信小程序 Toast自定義實(shí)例詳解

    微信小程序 Toast自定義實(shí)例詳解

    這篇文章主要介紹了微信小程序 Toast自定義實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • open 打開瀏覽器的過程原理示例解析

    open 打開瀏覽器的過程原理示例解析

    這篇文章主要為大家介紹了open 打開瀏覽器的過程原理示例解析,
    有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 一文解析Express框架view對(duì)象使用

    一文解析Express框架view對(duì)象使用

    這篇文章主要介紹了Express框架view對(duì)象使用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評(píng)論