Html Chrome动画使文本模糊

Firefox上的一切都很好，但chrome显示的动画文本模糊。我做的一切都像

-webkit字体平滑：亚像素抗锯齿，
-webkit转换：translate3d（0,0,0）以及前面提到的所有内容：


但问题依然存在

我做了一个非常简单的例子来向你们展示它的样子。我如何解决这个问题


var text=1；
函数next（）{
var next=（文本==2）？1:2；
document.getElementById（'text'+text.）.className='out'；
document.getElementById（'text'+next）.className='in'；
text=下一个；
}
正文{
填充：0；
保证金：0；
字体系列：tahoma；
字号：8pt；
颜色：黑色；
}
div{
高度：30px；
宽度：100%；
位置：相对位置；
溢出：隐藏；
边缘底部：10px；
}
div div{
不透明度：0；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
.在{
-webkit动画：Comein1s1；
-moz动画：Comein1s1；
动画：Comein1s1；
动画填充模式：两者都有；
}
@关键帧出现了{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.出去{
-webkit动画：goout1s1；
-moz动画：goout1s1；
动画：古特1s1；
动画填充模式：两者都有；
}
@关键帧goout{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

你好我正在测试文本。我是父亲！
嗨，我是test text jr。我天生聪明漂亮，但当我进来时，Chrome让我变得模糊，我很坏，我很坏。。。谁是坏人：）
接下来
这种错误呈现经常出现。
您可以尝试
transform:translate3d（0,0,0）
或
transform:translateZ（0）
在动画中查找元素，但并不总是有效。

-webkit字体平滑：反序列化
是另一个选项，但对我来说从未奏效。
更新2020-10：在我的测试中，这个问题似乎在Chrome/Chrome 85+中得到了解决。但这并不是完全固定的。您可能仍然会在某些地方遇到模糊

请在bug报告中查看此评论，该评论概述了Chrome如何处理此问题的持续改进工作：
您可以查看此链接及其动画时间问题，请查看链接


var text=1；
函数next（）{
var next=（文本==2）？1:2；
document.getElementById（'text'+text.）.className='out'；
document.getElementById（'text'+next）.className='in'；
text=下一个；
}
正文{
填充：0；
保证金：0；
字体系列：tahoma；
字号：8pt；
颜色：黑色；
}
div{
高度：30px；
宽度：100%；
位置：相对位置；
溢出：隐藏；
边缘底部：10px；
}
div div{
不透明度：0；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
.在{
-webkit动画：comein 0.5s 1；
-moz动画：comein 0.5s 1；
动画：comein 0.5s 1；
动画填充模式：两者都有；
}
@关键帧出现了{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.出去{
-webkit动画：goout 0.5s 1；
-moz动画：goout0.5s1；
动画：goout 0.5s 1；
动画填充模式：两者都有；
}
@关键帧goout{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

你好我正在测试文本。我是父亲！
嗨，我是test text jr。我天生聪明漂亮，但当我进来时，Chrome让我变得模糊，我很坏，我很坏。。。谁是坏人：）
下一步
当使用百分比移动动画时，由于浏览器在重新绘制阶段猜测其确切位置，文本将变得模糊。使用不同的单元（如“px”）移入，将允许浏览器在重新绘制阶段特定，并允许文本干净平滑

在阅读了下面的内容后，我意识到，同样的概念也可能有一个因素，那就是文本的模糊效果

百分比是相对值，这意味着它们必须依赖于其他值才能产生结果。所以每次你分配一个百分比值，它必须得到它的相对值来进行计算。当使用像素进行转换时，您只需更改转换值，但使用百分比时，您必须首先获得元素的尺寸，然后应用转换。对于每个动画帧都必须这样做

您可以在此处阅读更多关于此的信息：

在我的测试中，这似乎完全解决了我应用程序中所有动画的问题。（10+
添加动画时，文本模糊的最佳解决方案是在放置动画的样式上添加“z-index:1；”

.in {
  -webkit-animation: comein 0.5s 1;
  -moz-animation: comein 0.5s 1;
  animation: comein 0.5s 1;
  animation-fill-mode: both;
  z-index: 1;
}

无法在Chrome v53上复制：@nkmol你可以用codepen试试：我在Chrome上使用OSX，这里没有模糊FYI@MathijsSegers我没有Mac，但在Linux和Windows上测试过。两者都有同样的问题。我认为这与操作系统无关。这是关于Chrome如何处理动画的。如果你再在OSX上检查一下，我真的很感激。我把同样的文本与没有动画的文本进行比较：@MathijsSegers谢谢。它一定是在Linux和Windows上修复的。谢谢，但我已经在我的问题上提到了它无法解决问题。嗯，我下载了chrome canary（可能与chrome 72不同？？），但我仍然看到文本模糊。我的动画与上面的问题不同。我使用的是
transform:scale（1.02）
所以可能有区别吗？@ICE-你能给出一个示例答案吗？我很好奇你在哪里还看到问题。我创建的这个网站（）的效果在屏幕中央的绿色栏下，现在看起来相当不错。@ICE-如果在示例中放大字体大小，则过渡之间几乎没有模糊。您的用例也比以前有了很大的改进，即使它不是100%固定的。谢谢您的回答。我不知道你的情况，但是如果你看到我提供的例子，你会发现没有任何百分比来定位文本。即使我们使用
div{width:800px；
，我们仍然有