Menu
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:
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:
webkit-font-smoothing : none; does not help.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>
671
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.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
