Question

Firefox上的所有功能都很好但是chrome显示动画文字模糊。我做了-webkit-font-smoothing: subpixel-antialiased;，-webkit-transform: translate3d(0,0,0);以及之前提到的所有内容：

Webkit-based blurry/distorted text post-animation via translate3d

但问题仍然存在。

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

＆＃13;

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;
}

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

您还可以在 CodePen

中看到此示例

Answer 1

更新2018-10 ：在我的测试中，这似乎已在Chrome / Chromium 72中修复了！

这已成为至少一年的已知错误：https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c36

但其中一位开发人员的状态很有希望：

问题是由于我们在元素的本地空间中进行栅格处理。   如果元素具有小数转换，则为栅格化   纹理将用小数字粘贴到屏幕上   使用线性重采样进行平移，导致模糊。

解决方案是在与像素对齐的空间中栅格化事物   我们的实体屏幕。即将分数平移应用于   矢量图形命令而不是光栅纹理。

该修复将分为两部分：



允许我们的栅格系统使用任何常规矩阵进行栅格化的第一部分。这部分差不多完成了。我有一个WIP，但它仍然   有一个导致性能回归的错误。我期待完成它   几天之内。 https://codereview.chromium.org/2075873002/



第二部分允许我们的平铺管理能够管理具有不同光栅转换的纹理集。一世   最初用于一般矩阵，但结果是瓷砖   覆盖计算变得非常困难。我会做一个   更简单的版本，仅支持翻译和扩展。我估计   这将需要另一周的工作。

Answer 2

这种误会经常出现。您可以尝试transform: translate3d(0, 0, 0)或transform: translateZ(0)和动画中的元素，但它始终不起作用 -webkit-font-smoothing: antialised是另一种选择，但从未对我有用。

Answer 3

您可以查看此链接的动画时间问题请查看链接

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

Answer 4

当使用百分比移动动画时，文本将变得模糊，这是因为浏览器在重绘阶段猜测其确切位置。使用不同的单位（例如“ px”）进入浏览器，可以使浏览器在重新粉刷阶段具有特定性，并使文本干净流畅。

阅读下面的内容后，我意识到，对于文字的模糊效果，同样的概念也可能有影响。

百分比是相对值，这意味着它们必须依赖于其他值才能产生结果。因此，每次分配百分比值时，都必须获取其相对值才能执行计算。使用像素进行平移时，您只需要更改平移值，而使用百分比，则必须先获取元素的尺寸，然后应用平移。而且必须为每个动画帧完成。

您可以在此处了解更多信息：https://stackoverflow.com/a/50416761/4518455

在我的测试中，这似乎完全解决了我应用程序中所有动画的问题。（10岁以上）

Answer 5

添加动画时，文本模糊的最佳解决方案是添加“ 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动画可使文字模糊

5 个答案: