CSS3 transforms cause screen flickering or aliased font

Question

I am trying to apply some CSS3 transformations on elements and there is two problems. The webpage contains lots of sticky notes and I want to zoom on click (scale) or flip on hover (rotateY) them by applying CSS classes with some JavaScript.

For example the zoom class is like this :

.postit-container.enabled {
  z-index: 15;
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  -moz-transition: -moz-transform 0.15s ease-in-out;
  -o-transition: -o-transform 0.15s ease-in-out;
  -ms-transition: -ms-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

For the flip effect I only use rotateY(180deg) on :hover.

Every stickies has a default rotation of 6deg applied and I fake random rotation with the nth-child CSS3 selector to apply different rotations.

Problem is that the screen flickers randomly when zooming or flipping and some fonts on the page are altered and looks ugly but not all of them, that's really weird.

Here is a jsfiddle so you can see the problem yourself :

JSfiddle (tested with Google Chrome 12.0.742.122 on Mac OS X 10.6.8)

I already tried the -webkit-backface-visibility trick, the flicker is gone on aminations and transforms for sure but fonts look ugly all the time.

I hope someone has a magic trick, because I really don't understand this behavior.

Answer 1

Could you put examples into a jsfiddle, the screenshots do not do a good job of illustrating the problem.

However I have experienced a similar problem, I couldn't find the cause of the problem either. Or come up with an explanation as to what might be happening.

However I did find a solution that worked in my case.

-webkit-transform-style: preserve-3d;

I applied it on all the elements that seemed to have rendering issues. In my case some elements that where not being transitioned or even in the same container, where being effected in a seemingly random and inconsistent manner.

something like.

.header *, .sticky * {
    -webkit-transform-style: preserve-3d;
}

I would love provide an explanation as to what preserve-3d does, however I found the documentation pretty ambiguous.

About the crux of what I gathered is that it may fix the problem ( which it did ) and it has two properties

-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;

Flat is used by default.

Sorry I could not give a more detailed answer, but I hope this fixes the problem for you.

If anyone working on webKit is around, can you provide and explanation as to what this really does.

Answer 2

Try to add the following to your CSS:

-webkit-transform: translateZ(0);

this will force Hardware Acceleration for chrome, since chrome often decides to not use it based on the CSS

Answer 3

I have the same problem. Found solution very long time, but finally I found it.

Just add class .no-flickr to any problem object on your site and you see correct animation without any bugs.

See this http://jsfiddle.net/DaPsn/92/

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