css - Chrome でのフォントのピクセレートの問題 (HTML5/CSS3)

Question

CSS トランスフォームの 2D スケールが適用されると、テキストがピクセル化されるという問題があります。(Chrome でのみテストしました。後でクロス ブラウジングを行うので、別のブラウザーでテストする必要はありません。)

CSS

.versus_block_hover
{
    -webkit-transform: scale(1.2,1.2)!important; 
    -webkit-transition: 50ms 0ms!important; 
    z-index:1100!important;
    border-width:1px;
    border-color:#000;
    border-style:solid;
}

Javascript コード

$('.versus_block').hover(function() {
   $(this).addClass('versus_block_hover');
   $(this).parent().css('z-index','1100');
}, function() {
   $(this).removeClass('versus_block_hover');
   $(this).parent().css('z-index','0');
});

Chrome は 3D アクセラレーションのために CSS 変換中にビットマップ操作を使用することを知っています。しかし、jsfiddle でテストしたところ、ピクセル化されませんでした。トランジションが完了すると、Chrome はテキストを再描画するように見えます。

この作業例を参照してください。ボックスにカーソルを合わせます。(実際のサイトのすべての CSS 要素を配置します。)

http://jsfiddle.net/eCkdE/11/

そして、これは問題のある実際のサイトです。(いずれかのブロックにカーソルを合わせると、展開するとピクセル化されたフォントが表示されます)

http://jsfiddle.net/GJ7BM

誰でもそれを修正する方法を知っていますか? 私のjsfiddleで直接修正しても大丈夫です。