There seems to be an issue with a DIV in Text example A, where the text gets slightly blurred when applying a transform: translate CSS.
In contrast, Text example B maintains sharp fonts.
This problem only occurs on Google Chrome; FireFox 46.0.1 displays it correctly. I have observed this issue on:
- Google Chrome Version 51.0.2704.84 m
- Google Chrome Version 53.0.2768.0 canary (64-bit)
I am unsure if there is an error in my code or if it is a bug specific to Chrome.
If anyone has suggestions on how to resolve this while still using transform: translate, especially for the latest versions of Chrome and FireFox, please share.
Here are some observations related to this issue:
- The blurring effect varies with different font sizes.
- Applying
webkit-font-smoothing : none;does not solve the problem. - This issue persists regardless of the font type used (system default or custom).
- I am operating on Windows 8.1.
For a live demonstration, you can view the example here:
#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>