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.

Answer 3

When the animation is being moved using percentage the text will become blurred due to the the browser guessing its exact location during the repaint phases. Using a different unit to move in such as 'px' will allow the browser to be specific during it's repaint phase and allow the text to be clean and smooth.

After reading the below I realized that this same concept may also have a factor when it comes to the blurry effect on the text.

Percentages are relative values, which means they have to depend on some other value in order to produce result. So every time you assign a percentage value it has to get it's relative value to perform a calculation. When doing a translation with pixels you only have to change the translation values, but with percentages you have to get element's dimensions first and then apply the translation. And that has to be done for every animation frame.

You can read more about this here: https://stackoverflow.com/a/50416761/4518455

In my testings this seems to fix the issue fully for all of my animations in my application. (10+)

Answer 4

The best solution for text blurring when adding an animation is add "z-index: 1;" on the style where animation is placed.

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

Answer 5

you can check this link its animation time issue pls check down link

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