在 Firefox 上一切正常，但 chrome 显示的动画文本模糊。我做了一切就像-webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0);以及之前提到的所有内容：
通过 translate3d 基于 Webkit 的模糊/扭曲文本后期动画 https://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d
但问题仍然存在。
我做了一个非常简单的例子来向您展示它的样子。我该如何解决这个问题？
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
@keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
@keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
您还可以在以下位置查看示例 CodePen http://codepen.io/anon/pen/kkpJaL
2020 年 10 月更新：在我的测试中，这个问题似乎在 Chrome/Chromium 85+ 中得到了解决。但它并不是完全固定的。您可能仍然会遇到某些地方模糊的情况。
检查错误报告中的评论，其中概述了改进 Chrome 处理此问题的方式的持续工作：https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103 https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
