style.top と translateY() の両方が完全なピクセル値に丸められているようです。画像をサブピクセルに載せる方法はありますか?
例として、ここでは画像を含む div を 100 ミリ秒ごとに 0.1 ピクセル下に移動しています。 https://jsfiddle.net/je391bfr/
var i= setInterval(function() {this.myTimer(); },100);
var y=0;
var div=document.getElementById('mytest');
function myTimer(){
this.y+=.1;
console.log(this.y);
//var tr="translateY("+this.y+"px)";
var tr="translate(0,"+this.y+"px)";
this.div.style.webkitTransform=tr;
this.div.style.mozTransform=tr;
this.div.style.msTransform=tr;
this.div.style.oTransform=tr;
this.div.style.transform=tr;
}
注:アニメーション中にサブピクセル上にあるだけでなく、必要に応じてサブピクセル上で停止できるものが必要です。