Chrome Animation Makes Text Blurry

February 28, 2024 Post a Comment

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

Solution 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

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

Solution 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+)

Solution 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.5s1;
  -moz-animation: comein 0.5s1;
  animation: comein 0.5s1;
  animation-fill-mode: both;
  z-index: 1;
}

Solution 5:

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

var text = 1;

functionnext() {

  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;
}
divdiv {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.in {
  -webkit-animation: comein 0.5s1;
  -moz-animation: comein 0.5s1;
  animation: comein 0.5s1;
  animation-fill-mode: both;
}
@keyframes comein {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
  }
}
.out {
  -webkit-animation: goout 0.5s1;
  -moz-animation: goout 0.5s1;
  animation: goout 0.5s1;
  animation-fill-mode: both;
}
@keyframes goout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div><divclass="in"id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div><divid="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><buttononclick="next();">Next</button>

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

Build Html5