javascript - CSS 変換 translate3d 画像アニメーションの奇妙なアンチエイリアシング動作によりジッターが発生する

Question

CSS3 translate3d を使用して左から右にアニメーション化する画像の jsFiddle の例があります: http://jsfiddle.net/Rhx2K/3/

requestAnimationFrame が 60fps をループし、すべてのフレームでサブピクセル間隔で JPG 画像の左位置を設定しています。

var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');

var image1Left = 0;
var image2Left = 0;
var subpixel   = 1 / 64;

var _run = function(){
    window.requestAnimFrame(_run);
    image1Left += subpixel * 5;
    image2Left += subpixel;
    image1.style.webkitTransform  = 'translate3d('+image1Left+'px, 0px, 0px)';
    image2.style.webkitTransform  = 'translate3d('+image2Left+'px, 0px, 0px)';
}

_run();

例に2つの画像を入れました。どちらも同じことをしていますが、一番上の方が速く動いているだけです。この階段状の効果があることに注目してください。画像自体はサブピクセル レベルで変換されます。画像が一定の速度で移動する様子に注目してください。木が滑るように見えますが、左側と右側が揺れていることがわかります。実験した結果、ピクセルから離れるほどアンチエイリアシングが大きくなることがわかりました。たとえば、左: 1px ではアンチエイリアスはありませんが、左: 1.2px ではいくつかあり、左: 1.5px ではさらに多くあります。左: 1.7px では少なく、2px では何もありません。したがって、ここでのぐらつきは、各サブピクセル ステップでの相対的なアンチエイリアシングによるものです。このジッターを引き起こさなければ、これは理にかなっています。

これは、変換で Webkit トランジションを使用する場合にも発生します。 http://jsfiddle.net/Rhx2K/5/

これは標準的な動作ですか？webkit自体のバグのようです。

ここで見られるように、私の方法は、ピクセル値のみでアニメーション化することでした: http://cmivfx.com/home

ピクセル値 (対サブピクセル値) では、画像にアンチエイリアシングが追加されないため、アニメーションは非常に滑らかに見えます...その点で私が抱えている唯一の問題は、完全なピクセルの増分によって画像の動きが速すぎることです。アニメーションを遅くするには、サブピクセルの増分が必要です。

私はこれらすべてを試しました....

-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

そのどれもが答えではありません。translate3d アニメーションをサブピクセル単位で見栄えよくするにはどうすればよいですか?