Webkit text flickers when using CSS transform (scale)

Question

This happens in Safari 6 on Mountain Lion and in the latest chrome. (Confirmed on OSX, might not happen in windows)

Please see this page for an example:

http://users.telenet.be/prullen/flicker2.html

Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing.

The associated CSS is below. I cannot make any changes to the .out and .in classes. Only to the item class.

I have tried adding -webkit-backface-visibility:hidden; as I read somewhere that that should fix it, but it hasn't made any difference.

Does anyone have a clue?

Thanks, Wesley

.out {                                      
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                                      
   border:            0;
   padding:        0;                                      
   margin-left:    auto;                                       
   margin-right:    auto;                                      
   overflow:        hidden;    
 }
.in {                                   
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                           
   padding:        0;                            
   border:            0;
   overflow:        hidden;
}
.item {
   margin: 60px;
   -webkit-transition: -webkit-transform .15s linear;
   -moz-transition: -moz-transform .15s linear;
   -o-transition: -o-transform .15s linear;
   transition: transform .15s linear;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style : preserve-3d;
   -ms-transform-style : preserve-3d;
}
.item:hover {
   -webkit-transform: scale(1.3) !important;
   -moz-transform: scale(1.3) !important;
   -o-transform: scale(1.3) !important;
   -ms-transform: scale(1.3) !important;
   transform: scale(1.3) !important;
}

Solution 1

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.

Solution 2

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);
}

Solution 3

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.