Geek Answers Handbook

Text is blurry during conversion: translates and adjoins another element with animation

In the following example, a DIV containing some text (Example A) is slightly blurry when transform: translateCSS is applied .

When instead in text example B, the fonts are sharp.

The problem only occurs in Google Chrome and works fine on FireFox 46.0.1. I was able to reproduce this 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 is it a bug in Chrome.

Any idea of ​​how to solve this problem is also welcome, given what I would like to keep transform: translateif possible, and I am mainly focused on the latest versions of Chrome and FireFox.

Notes on what I have noticed so far:

  • The blur effect occurs at different levels with different font sizes.
  • Use webkit-font-smoothing: none;does not help.
  • The problem occurs with any font (system default or custom).
  • I am using Windows 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>
Run codeHide result
+5
source share
1 answer

This is not an error in your code, it is a well-known Webkit rendering error. See For example: https://support.mozilla.org/pl/questions/1075185 (and many other topics on the FF support forums).

Chrome, FF, " ". , "" , . , translate . " CSS" / .

, , . , . , , . Webkit, . , , , , . - , translate. .

+3

More articles:


All Articles