亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2023-02-24 13:46:10 來源:億速云 閱讀:132 作者:iii 欄目:開發技術

這篇文章主要介紹了element彈窗表格的字體模糊如何解決的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇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的渲染模式,可以改善。

似乎可行。由于字體模糊現象在自己的電腦實在無法必須,所以沒有辦法判斷是不是這個屬性起的作用。

隱藏滾動條。

這個我沒有嘗試,感覺有點傻。

叫用戶換瀏覽器,火狐瀏覽器我全網搜索都沒有說有這個問題。

更換高清顯示器。

關于“element彈窗表格的字體模糊如何解決”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“element彈窗表格的字體模糊如何解決”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

大关县| 卫辉市| 平邑县| 毕节市| 安塞县| 横峰县| 娱乐| 西峡县| 大同县| 邵阳县| 翁牛特旗| 介休市| 丽水市| 霍山县| 卓资县| 出国| 雷波县| 萨嘎县| 彭山县| 广灵县| 侯马市| 交城县| 孝昌县| 商城县| 通山县| 色达县| 河东区| 中西区| 古交市| 当雄县| 翁源县| 杭锦后旗| 杂多县| 金堂县| 湛江市| 台山市| 黄浦区| 新和县| 新民市| 久治县| 奉化市|