在以下示例中，一个包含一些文本的div（示例A），当应用transform: translate CSS时会略微模糊。
而不是在文本示例B中，字体很清晰。
问题仅在Google Chrome上发生，并且在Firefox 46.0.1上效果很好。我能够重现：
- Google Chrome版本51.0.2704.84 M
- Google Chrome版本53.0.2768.0金丝雀（64位）
我想知道，如果我的代码有问题，或者是chrome中的错误。
也欢迎任何想法解决，请考虑到可能的话，我想保留transform: translate，我主要针对最新的Chrome和Firefox。
注意到到目前为止我注意到的内容：
- 模糊效应在不同的字体大小时以不同的级别发生。
- 使用
webkit-font-smoothing : none;无济于事。 - 任何字体发生的问题（系统默认或自定义）。
- 我正在使用窗口8.1。
这是一个现场示例：
#test {
position: fixed;
font-size: 20px;
top: 60%;
left: 40%;
}
#splashScreen__spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -90px);
width: 50px;
height: 50px;
}
#splashScreen__infos {
position: fixed;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: none;
}
.loadingSpinner {
width: inherit;
height: inherit;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
animation: spinnerAnimation 0.7s infinite linear;
}
@keyframes spinnerAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<body>
<div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
<div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
</div>
<div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
<div id="test">B) - We are loading your website. Please wait.</div>
</body>这不是您代码中的错误，这是众所周知的webkit渲染错误。例如，请参见：https：//support.mozilla.org/pl/questions/1075185（以及FF支持论坛上的更多线程）。
在Chrome和FF中，在高级浏览器设置中，您可以关闭所谓的"硬件加速度"。存在此设置，可以使您的硬件"帮助"浏览器在高级图形渲染中。硬件加速度会自动打开您使用translate和其他一些规则的元素。在某些情况下，没有经验的" CSS黑客"有时会使用这种情况来实现一些更好/清晰的渲染。
，但有时会导致好坏，这是您的情况。一旦您在浏览器中关闭硬件加速度后，字体就非常清楚。可悲的是，没有真正的解决方案代码，您不能强制将其关闭以作为给定元素将其关闭。我们依靠Webkit Devs在此处修复渲染引擎。您只能四处乱逛，例如将字体大小更改为没有真正原因的字体大小。或以某种方式更改定位，这不涉及translate。祝您好运。