Webkit text flickers when using CSS transform (scale)

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)