Chrome animation makes text blurry

Question

Everything works good on Firefox but chrome shows the animated text blurry. I did everything like -webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0); and everything mentioned here before:

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

but the problem still exist.

I made very simple example to show you how it looks like. How can I fix this problem?

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>

You can also see the example at CodePen

Answer 1

Update 2020-10: this issue appears to be resolved in Chrome/Chromium 85+ in my testing. But it is not entirely fixed. You may still encounter blur in places.

Check this comment in the bug report that outlines continuing work to improve how Chrome handles this: https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103

Answer 2

This misrendering often appears. You can try transform: translate3d(0, 0, 0) or transform: translateZ(0) und the element with the animation, but it doesnt works always.
-webkit-font-smoothing: antialised is another option but that never worked for me.