Webkit text flickers when using CSS transform (scale)

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

Answers


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. See this http://codepen.io/artemmedvedev/pen/uLwvo

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.


Need Your Help

Get member of __m128 by index?

c++ clang sse simd intrinsics

I've got some code, originally given to me by someone working with MSVC, and I'm trying to get it to work on Clang. Here's the function that I'm having trouble with:

Add items to a collection if the collection does NOT already contain it by comparing a property of the items?

c# linq collections contains

Basically, how do I make it so I can do something similar to: CurrentCollection.Contains(...), except by comparing if the item's property is already in the collection?