Chrome动画导致文本模糊

Question

在Firefox上一切正常，但Chrome显示的动画文本模糊。我已经执行了以下操作：-webkit-font-smoothing: subpixel-antialiased;，-webkit-transform: translate3d(0,0,0);以及之前提到的所有事项：

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上查看示例。

- ICE

---

无法在Chrome v53上重现：https://jsfiddle.net/1x8azozx/ - nkmol

@nkmol 你可以在 CodePen 上试试： http://codepen.io/anon/pen/kkpJaL - ICE

我正在使用OSX上的Chrome，这里没有任何模糊。顺便说一下。 - Mathijs Segers

@Mathijs Segers 我没有Mac，但在Linux和Windows上进行了测试。两者都有同样的问题。我认为这不是关于操作系统的问题，而是关于Chrome如何处理动画的问题。如果您能再次在OSX上检查一下，我会非常感激。我放置了相同的文本，带有和不带有动画以进行比较：http://codepen.io/anon/pen/kkpJaL - ICE

@asimovwasright 那个答案不能解决问题。我已经在我的问题中提到了。 - ICE

Answer 1

更新2020-10：根据我的测试，此问题似乎在Chrome / Chromium 85+中得到解决。但它并没有完全修复。您仍然可能在某些地方遇到模糊。

请查看错误报告中的此评论，概述了改进Chrome处理此问题的持续工作：https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103

- serraosays

---

我下载了Chrome Canary（可能不同于Chrome 72？），但我仍然看到文本模糊。我的动画与上面的问题不同。我正在使用transform: scale(1.02)，所以可能有所不同？ - Sarah

@ICE - 你能发一个例子回答吗？我很好奇你还在哪里看到问题。我建立的这个网站（http://live-nacubo-emp.pantheonsite.io/）中心绿色条的效果现在看起来非常好。 - serraosays

@ICE - 如果您在示例中放大字体大小，转换之间几乎没有模糊。您的用例似乎也比之前改进了很多，即使它并不是100％固定的。 - serraosays

Answer 2

这种错误经常出现。 您可以尝试在带有动画的元素上使用 transform: translate3d(0, 0, 0) 或者 transform: translateZ(0)，但是并不总是有效。
-webkit-font-smoothing: antialised 是另一种选择，但对我来说从未起过作用。

- Code Spirit

---

谢谢，但我已经在我的问题中提到它无法解决问题。 - ICE

Answer 3

当使用百分比移动动画时，由于浏览器在重绘阶段猜测其精确位置，文字会变得模糊。使用其他单位（例如“px”）进行移动将允许浏览器在它的重绘阶段中变得更加具体，从而使文本清晰流畅。

阅读下文后，我意识到这个概念在涉及到文本的模糊效果时也可能是一个因素。

百分比是相对值，这意味着它们必须依赖于其他一些值才能产生结果。因此，每次分配百分比值时，它都必须获取其相对值以执行计算。使用像素进行转换时，您只需要更改转换值，但使用百分比时，您必须首先获取元素的尺寸，然后应用转换。并且必须在每个动画帧中都要执行。

您可以在这里了解更多信息：https://dev59.com/6-k5XIcBkEYKwwoY7eME#50416761

在我的测试中，这似乎完全修复了我应用程序中所有动画（10+）的问题。

- L1ghtk3ira

---

谢谢你的回答。我不知道你的情况，但是如果你看一下我在问题中提供的例子，你会发现没有任何百分比来定位文本。即使我们使用 div { width: 800px;，我们仍然有模糊的问题。我大约3年前问过这个问题，Chrome仍然没有解决这个问题，而Firefox从来没有出现过这个问题。 - ICE

我还应该提到，我有一个解决这个问题的hack，但我认为它可能会导致混乱的CSS。在我的例子中创建一个类.show{opacity:1;}，这是100%动画值的确切内容。现在，在JavaScript中，不要使用.className ='in';，而是使用.className ='in show';。现在Chrome可以在最后释放动画。非常奇怪，但它有效。 - ICE

Answer 4

在添加动画时，文本模糊的最佳解决方案是在放置动画的样式中添加“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;
}

- Angelica

---

仍然看到模糊。问题没有解决。 - ICE

Answer 5

您可以查看此链接，它是关于动画时间问题的，请向下滚动以查看链接。

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 0.5s 1;
  -moz-animation: comein 0.5s 1;
  animation: comein 0.5s 1;
  animation-fill-mode: both;
}
@keyframes comein {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
  }
}
.out {
  -webkit-animation: goout 0.5s 1;
  -moz-animation: goout 0.5s 1;
  animation: goout 0.5s 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>

http://codepen.io/anon/pen/kkpJaL

- amit bende