在我們的頁面中，經常會出現這樣的問題，一塊區域內的文本或者邊框，在展示的時候，變得特別的模糊，如下(數據經過脫敏處理)：

正常而言，應該是這樣的：

emmm，可能大圖不是很明顯，我們取一細節對比，就非常直觀了：

何時觸發這種現象?

那么?什么時候會觸發這種問題呢?在 Google 上，其實我們能搜到非常多類似的案例，總結而言：

1.當文本元素的某個祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作時，容易出現這種問題

當然，這只是必要條件，不是充分條件。繼續深入探究，會發現，必須還得同時滿足一些其它條件：

2.元素作用了 transform: translate() 或者 transform: scale() 后的計算值產生了非整數

譬如，上述案例觸發的 CSS 代碼如下：

.container {
    position: absolute;
    width: 1104px; 
    height: 475px;
    top: 50%;
    transform: translateY(-50%);
    // ...
}

由于元素的高度為 475px，translateY(-50%) 等于 237.5px，非整數，才導致了內部的字體模糊。

但是，需要注意的是，并非所有產生的非整數都會導致了內部的字體模糊。

這里有個簡單的示意：

還是上述的例子，當高度從 477px 一直調整到 469px 的過程中，只有 477px 和 475px 導致了模糊，而 473, 471, 469 則沒有。所以，這也只是引發模糊的一個必要條件。

3.文本內容是否模糊還與屏幕有關，高清屏(dpr > 2)下不容易觸發，更多發生在普通屏幕下(dpr = 1)

在我實測的過程中還發現，這個現象基本只會發生在 dpr 為 1 的普通屏幕下。

類似于 MAC 的高清屏幕則不太會觸發這個問題。

dpr = 物理像素 / 設備獨立像素，表示設備像素比。這個與我們通常說的視網膜屏(多倍屏，Retina屏)有關。設備像素比描述的是未縮放狀態下，物理像素和設備獨立像素的初始比例關系。

并非所有瀏覽器都是這個表現，基本發生在 chromium 內核。

為何發生這種現象呢?

那么，為何會發生這種現象?針對這個問題，沒有找到特別官方的回答，普遍的認為是因為：

由于瀏覽器將圖層拆分到 GPU 以進行 3D 轉換，而非整數的像素偏移，使得 Chrome 在字體渲染的時候，不是那么的精確。

關于這個問題，感興趣的可以再看看這兩個討論：

• Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.[1]
• Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275[2]

如何解決?

那么針對這個問題，我們該如何解決呢?社區里給出的一種方案：

1.給元素設置 -webkit-font-smoothing: antialiased

font-smooth CSS 屬性用來控制字體渲染時的平滑效果，該特性是非標準的，我們應該盡量不要在生產環境中使用它。并且在我的實測中，這個方法不太奏效。

2.保證運用了 transform: translate() 或者 transform: scale() 的元素的高寬為偶數

如果你賦予給元素的 transform 的值非常明確，譬如我上文例子中的利用其來對元素進行水平垂直居中 -- transform: translate(-50%, -50%)，讓元素的高寬為偶數這個方法是可行的，但如果當你無法確定transform 的值，譬如 transform: translateX(-31.24%) 或者是 transform: scale(1.05)，那這個方法依舊無法奏效。

3.棄用 transform

如果這個問題對你的頁面非常致命，那么只能棄用 transform，尋找替代方案。大部分的時候，我們還是可以找到不使用 transform 的替代方案的。

總結一下，本文簡單探究了在 Chromium 內核下，使用了 transform 導致內部文本模糊的現象，并且給出了一些可嘗試的解決方案，實際遇到，需要多加調試，嘗試最優的解決方案。

最后

好了，本文到此結束，希望本文對你有所幫助 :)

參考資料

[1]Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.: https://bugs.chromium.org/p/chromium/issues/detail?id=521364

[2]Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275: https://github.com/kenwheeler/slick/issues/2275

[3]Github -- iCSS: https://github.com/chokcoco/iCSS