在我们的页面中，经常会出现这样的问题，即某个区域的文字或边框在显示时变得特别模糊，如下（数据经过脱敏处理）：正常情况下说起来应该是这样的：emmm，可能大局不是很明显，我们对比一下细节，很直观：这个现象会在什么时候触发？所以？这个什么时候触发？那问题呢？在谷歌上，我们其实可以找到很多类似的案例。总结一下：1.当一个文本元素的祖先容器中存在transform:translate()或transform:scale()等变换操作时，很容易实现，当然这只是必要条件，不是充分条件.如果继续深入探索，你会发现还必须同时满足一些其他条件：2.应用transform:translate()或transform:scale()后元素的计算值产生非整数。例如，上述案例触发的CSS代码如下：.container{position:absolute;宽度：1104px；高度：475px；顶部：50%；变换：翻译Y(-50%)；//...}由于元素的高度为475px，translateY(-50%)等于237.5px，非整数，导致内部字体模糊。但是，应该注意的是，并非所有生成的非整数都会导致内部字体模糊。这里简单提示一下：还是上面的例子，当高度从477px调整到469px时，只有477px和475px会模糊，473、471、469不会。因此，这只是造成歧义的必要条件。3、文字内容是否模糊也与屏幕有关。在高清屏幕（dpr>2）上不易触发，在普通屏幕（dpr=1）上更容易触发。我在实测的时候也发现这个现象基本上只出现在dpr为1的普通屏下，像MAC这样的高清屏不太可能触发这个问题。dpr=物理像素/设备独立像素，表示设备像素比。这与我们通常所说的视网膜屏幕（multiplescreen，Retinascreen）有关。设备像素比描述了在未缩放状态下物理像素和设备独立像素之间的初始比例关系。并不是所有的浏览器都是这样的，它基本上发生在chromium内核中。为什么会这样？那么，为什么会这样呢？这个问题没有官方答案。一般认为是因为浏览器将图层拆分给GPU进行3D转换而不是整数像素偏移，导致Chrome在渲染字体时不够准确。关于这个问题，有兴趣的可以看看这两个讨论：ChromiumBugs--Issue521364:Transformedtextatfractionaloffsetsisveryblur.[1]Seriousbug:SlickSliderturnsoffsubpixelfontrenderingontheentiresite在如何解决Chrome#2275[2]？那么我们如何解决这个问题呢？社区给出的一个解决方案：1.给元素设置-webkit-font-smoothing:antialiasedfont-smoothCSS属性来控制渲染时的字体平滑，这个特性是非标准的，生产中尽量不要使用.而且在我的实际测试中，这个方法效果不是很好。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]ChromiumBugs--Issue521364:Transformedtextatfractionaloffsetsisveryblur.:https://bugs.chromium.org/p/chromium/issues/detail?id=521364[2]严重错误：SlickSlider在Chrome中关闭整个站点的亚像素字体渲染#2275：https://github.com/kenwheeler/slick/issues/2275[3]Github——iCSS：https://github.com/chokcoco/iCSS
