Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same issue occurs when translating an element as well.
Check out the basic preview: Example 1
When focusing on the textarea above these elements, the font rendering becomes much smoother and correct: Example 2
The text looks better when focused. Any suggestions on how to solve this problem? Firefox doesn't seem to have this issue. Additionally, I am using:
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}