Font pixelate when using matrix3d scale and backface-visibility

Question

Code: http://jsfiddle.net/quskwLdh/3/

I am using Famo.us and there is a usage of matrix3d to transform a div. It becomes problematic when I scale down some text and it started to get pixelated.

The code is below with 4 tests:

First div (style1): Not using matrix3d but use transform:scale(0.2) instead. The font is smooth just fine.

Second div (style2): Use matrix3d and backface-visibility (required in default Famo.us). It's smooth in Chrome but pixelate in Safari.

Third div (style3): Update css with matrix3d on the fly dynamically (using setTimeout) but not use backface-visibility. Again it's smooth in Chrome but pixelate in Safari.

Fourth div (style4): Update css with matrix3d on the fly dynamically (using setTimeout) AND use backface-visibility. This all screwed up in both Safari and Chrome as they're all pixelated.

CHROME

SAFARI

HTML

<div class="style1">
    TYPOGRAPHY
</div>

<div class="style2">
    TYPOGRAPHY
</div>

<div class="style3">
    TYPOGRAPHY
</div>

<div class="style4">
    TYPOGRAPHY
</div>

CSS

body {
    font-size:100px;
    font-weight: normal;
    font-family: georgia, serif;
}

.style1 {
    transform:scale(0.2);    
    -webkit-transform:scale(0.2);   
}

.style2 {
    transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.style3 {
}

.style4 {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

JS

setTimeout(function() {
    $('.style3').css('transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');    
    $('.style3').css('-webkit-transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');

    $('.style4').css('transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
    $('.style4').css('-webkit-transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
}, 1000);

Question: Given that Famou.us needs to have matrix3d and backface-visibility:hidden, what's the workaround to have font smoothing in Chrome and Safari (I would not care about IE)?

I have done some research via CSS3 scale() causes divs to become pixelated and @font-face for custom fonts, fonts not smooth in Chrome so the usage of shadow, -webkit-text-stroke: 0.3pt; or -webkit-font-smoothing: antialiased; just don't work. Alternatively, maybe there is a way to modify/hack Famo.us itself?