CSS3 transforms cause screen flickering or aliased font

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.