htmlcsswebkittransformtranslate-animation

Webkit - Text becomes unsharp when using css transform (translate)

I have a problem with webkit transform.

Without -webkit-backface-visibility:hidden

... many objects on my page are flickering, when i translate (like: -webkit-transform: translate(80%,0)) an object

and 

With -webkit-backface-visibility:hidden

... the problem is, that child->texts become unsharp, when i move the parent (like: -webkit-transform: translate(80%,0)). It becomes sharp again, when transform->translate-value is (0,0) again.

Does somebody know a trick how i can solve this problem?

Infos: Windows, Chrome 31.0 xxx,

Solution

  • According to this post. Adding the following to the element being animated should solve the problem.

    .element {
    -webkit-transform: translateZ(0);
}

    I've never used it so I'm unaware as to the effects it will have on page performance and compatibility, but fingers crossed, it will solve your issue.