Javascript CSS transform translate3d图像动画奇怪的抗锯齿行为导致抖动

我有一个使用CSS3 translate3d从左到右设置图像动画的JSFIDLE示例，如下所示：

我有一个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();

我在示例中放置了两个图像。他们都在做同样的事情，只是最上面的一个移动得更快。请注意它是如何产生这种楼梯踏步效果的。图像本身在亚像素级进行转换。注意图像是如何以恒定速率移动的——你可以看到树木似乎在滑动，但左右两侧都在抖动。经过实验，我意识到，离像素越远，抗锯齿效果就越明显。例如，在左：1px，没有抗锯齿，但在左：1.2px，有一些，然后在左：1.5px，有更多。在左边：1.7px时，有更少的，然后在2px时，没有。因此，这里的抖动是由于每个亚像素步的相对抗锯齿造成的。如果它没有引起这种抖动，这将是有意义的

在转换上使用webkit转换时也会发生这种情况

这是标准行为吗？这似乎是webkit本身的一个bug

我的方法是仅通过像素值设置动画，如下所示：

使用像素值（与子像素值相比），不会向图像添加抗锯齿，因此动画看起来非常平滑。。。我唯一的问题是，全像素增量会导致图像移动过快。我需要亚像素增量来减慢动画

我都试过了

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

所有这些都不是答案。如何使translate3d动画在亚像素增量上看起来良好