CODEWITHSUNDEEP
cssgoogle-chromefontsfont-faceopera
cobys
cobys

Reputation: 51

Wierd font rendering in chrome

So I've faced really strange issue with font rendering with Chrome/Opera versus Firefox. Here's preview of an issue, please notice pink text. It's blurry in the first example and it changes after text input is focused. Same smoothness issue happen whenever I use translating an element.

Basic preview: Example 1

While focusing textarea above those elements font starts to render really smooth and how it suppose to be: Example 2

Text looks more smooth while focused. Any ideas for the problem? Firefox doesn't have this kind of issue. I'm also using:

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Upvotes: 3

Views: 1125

Answers (1)

cobys
cobys

Reputation: 51

Hiding backface resolved this issue.

.backface-hidden {
   backface-visibility: hidden;
}

Upvotes: 2

Related Questions