在下面的示例中，一个包含一些文本的 DIV(示例 A)在应用了 transform: translate CSS 时变得稍微模糊。
在文本示例 B 中，字体清晰。
该问题仅在 Google Chrome 上发生，在 FireFox 46.0.1 上运行良好。 我能够在以下位置重现它:
- 谷歌浏览器版本 51.0.2704.84 m
- Google Chrome 版本 53.0.2768.0 金丝雀版(64 位)
我想知道我的代码是否有问题，或者是 Chrome 中的错误。
也欢迎任何想法如何解决它，考虑到我想尽可能保留 transform:translate，我主要针对最新的 Chrome 和 FireFox。
到目前为止我注意到的注意事项:
- 模糊效果会在不同的字体大小下以不同的级别出现。
- 使用
webkit-font-smoothing : none;没有帮助。 - 任何字体(系统默认或自定义)都会出现问题。
- 我使用的是 Window 8.1。
这是一个live example :
#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 开发人员在这里修复渲染引擎。您只能随意修改，例如将字体大小更改为无缘无故呈现更好的字体大小。或者以某种不涉及 translate 的方式改变定位。祝你好运。
关于html - 转换后文本模糊 : translate and it is adjacent to another element with an animation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37856596/