乐趣区

关于前端:疑难杂症运用-transform-导致文本模糊的现象探究

jiezi

在咱们的页面中，常常会呈现这样的问题，一块区域内的文本或者边框，在展现的时候，变得特地的含糊，如下 (数据通过脱敏解决)：

失常而言，应该是这样的：

emmm，可能大图不是很显著，咱们取一细节比照，就十分直观了：

何时触发这种景象？

那么？什么时候会触发这种问题呢？在 Google 上，其实咱们能搜到十分多相似的案例，总结而言：

  1. 当文本元素的某个先人容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时，容易呈现这种问题

当然，这只是必要条件，不是充分条件。持续深刻探索，会发现，必须还得同时满足一些其它条件：

  1. 元素作用了 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 则没有。所以，这也只是引发含糊的一个必要条件。

  1. 文本内容是否含糊还与屏幕无关，高清屏（dpr > 2）下不容易触发，更多产生在一般屏幕下（dpr = 1）

在我实测的过程中还发现，这个景象根本只会产生在 dpr 为 1 的一般屏幕下。

相似于 MAC 的高清屏幕则不太会触发这个问题。

dpr = 物理像素 / 设施独立像素，示意设施像素比。这个与咱们通常说的视网膜屏（多倍屏，Retina 屏）无关。设施像素比形容的是未缩放状态下，物理像素和设施独立像素的初始比例关系。

  1. 并非所有浏览器都是这个体现，根本产生在 chromium 内核。

为何产生这种景象呢？

那么，为何会产生这种景象？针对这个问题，没有找到特地官网的答复，广泛的认为是因为：

因为浏览器将图层拆分到 GPU 以进行 3D 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的准确 。

对于这个问题，感兴趣的能够再看看这两个探讨：

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

如何解决？

那么针对这个问题，咱们该如何解决呢？社区里给出的一种计划：

  1. 给元素设置 -webkit-font-smoothing: antialiased

font-smooth CSS 属性用来管制字体渲染时的平滑成果，该个性是非规范的，咱们应该尽量不要在生产环境中应用它。并且在我的实测中，这个办法不太见效。

  1. 保障使用了 transform: translate() 或者 transform: scale() 的元素的高宽为偶数

如果你赋予给元素的 transform 的值十分明确，譬如我上文例子中的利用其来对元素进行程度垂直居中 — transform: translate(-50%, -50%)，让元素的高宽为偶数这个办法是可行的，但如果当你无奈确定 transform 的值，譬如 transform: translateX(-31.24%) 或者是 transform: scale(1.05)，那这个办法仍旧无奈见效。

  1. 弃用 transform

如果这个问题对你的页面十分致命，那么只能弃用 transform，寻找代替计划。大部分的时候，咱们还是能够找到不应用 transform 的代替计划的。

总结一下，本文简略探索了在 Chromium 内核下，应用了 transform 导致外部文本含糊的景象，并且给出了一些可尝试的解决方案，理论遇到，须要多加调试，尝试最优的解决方案。

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版