Javascript translate3d在iOS上滞后

我正在为iOS设备开发一个项目，当用户拖动对象时，我使用translate3d在页面上移动对象

用Chrome（甚至Safari）观看时，你可以看到盒子的移动非常平稳，但在iPhone或iPad上观看时，盒子的移动一点也不平稳。在iOS上使用CSS转换和translate3d时，转换非常平滑，所以我不明白为什么不是这样。有办法解决这个问题吗

这是我的javascript：（JSFIDLE:）

---

使用-webkit透视图：1000-webkit背面可见性：隐藏在.box中的元素上

比如说

"

"

---

它在ios6中工作得很好，但是ios7…

您必须为此使用translate3d吗？在我看来，仅将顶部和左侧的值设置为绝对位置更有意义。我使用translate3d是因为用户释放对象后，它将捕捉到一个点，因此我可以使用CSS转换将对象动画化到某个点（比设置顶部/左侧动画更平滑）。根据应用程序的要求，我可能仍然认为，使用top/left会更好。看到了吗？我认为这要简单得多，最后，确定盒子的位置会容易得多。这在Chrome上很好用，但我在一个动作起伏的iPhone上遇到了同样的问题。

var tStart, loc, rdy;
$(".box").bind("mousedown touchstart", function (e) {
    tStart = e.type == "mousedown" ? event.clientX : event.touches[0].pageX;
    tStartY = e.type == "mousedown" ? event.clientY : event.touches[0].pageY;
    tStartTranslate = getTranslateParams($(this), "x");
    tStartTranslateY = getTranslateParams($(this), "y");
    $(".log").text(tStart);
    rdy=true;
});
$(".box").bind("mousemove touchmove", function (e) {
    event.preventDefault();
    if(!rdy){return;}
    loc = tStart - parseInt(e.type == "mousemove" ? event.clientX : event.touches[0].pageX);
    locY = tStartY - parseInt(e.type == "mousemove" ? event.clientY : event.touches[0].pageY);
    $(this).css({"-webkit-transform": "translate3d(" + parseInt(Math.ceil(tStartTranslate) + (-loc), 10) + "px," + parseInt(Math.ceil(tStartTranslateY) + (-locY), 10) + "px,0)"});
});

function getTranslateParams(obj, xy) {
    var paramsArray = $(obj).css('-webkit-transform').substring(7, $(obj).css('-webkit-transform').indexOf(')')).split(',');
    if (xy !== "x" && xy !== "y") {
        return false;
    }
    return xy == "x" ? paramsArray[4] : paramsArray[5];
}

.box li{
-webkit-perspective:1000;
-webkit-backface-visibility:hidden
}