Webkit text flickers when using CSS transform (scale)
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'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.