Webkit text flickers when using CSS transform (scale)

Question

I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.

Actually, adding

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

to the affected elements does solve the problem.

You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.

Note: This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.

I have the same problem, but fix it.

Just add the .no-flickr class to any blinking or flickering element in your project

.no-flickr {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

I've had the same problem this morning and found that the best fix was:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

I added this to each of the two elements that make up the faces of the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.