Text is blurred when has transform: translate and it is adjacent to another element with an animation

Question

In the following example a DIV containing some text (example A), get slightly blurred when has a transform: translate CSS applied.

When instead in Text example B, fonts is sharp.

The problem happens only on Google Chrome and works fine on FireFox 46.0.1. I was able to reproduce it on:

Google Chrome Version 51.0.2704.84 m
Google Chrome Version 53.0.2768.0 canary (64-bit)

I would like to know, if there is a problem with my code, or it is a bug in Chrome.

Also any idea how to solve it is welcome, keeping in consideration I would like to keep transform: translate if possible, and I mainly targeting latest Chrome and FireFox.

Notes on what I have notice so far:

Blur effect happens with different level at different font-size.
Using webkit-font-smoothing : none; does not help.
Issue happens with any font (system default or custom).
I am using Window 8.1.

Here is a live example:

#test {
  position: fixed;
  font-size: 20px;
  top: 60%;
  left: 40%;
}

#splashScreen__spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90px);
  width: 50px;
  height: 50px;
}

#splashScreen__infos {
  position: fixed;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: none;
}

.loadingSpinner {
  width: inherit;
  height: inherit;
  border: 5px solid #3498db;
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  animation: spinnerAnimation 0.7s infinite linear;
}

@keyframes spinnerAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<body>
  <div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
    <div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
  </div>
  <div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
  <div id="test">B) - We are loading your website. Please wait.</div>
</body>

I found this question http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome have you tried this? — Pascal Goldbach, Jun 16 '16 at 10:41
Check out on this, it may help you: http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d — Teuta Koraqi, Jun 16 '16 at 10:43
@PascalGoldbach thanks, but unfortunately -webkit-backface-visibility: hidden; does not work either — GibboK, Jun 16 '16 at 11:18
@TeutaKoraqi thanks, I have tried also using transform: translate3d(-50%,-50%,0); but with no success. — GibboK, Jun 16 '16 at 11:21

JoannaFalkowska · Accepted Answer · 2019-05-17T13:30:59.933

This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).

In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "css hackers" to achieve some better/clearer rendering in some cases.

But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit devs fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Thanks for mentioning this bug. – GibboK Jun 17 '16 at 06:20 — GibboK, Jun 17 '16 at 06:20

Text is blurred when has transform: translate and it is adjacent to another element with an animation

1 Answers1