translate3d lags on iOS

Question

I'm working on a project for iOS devices and I am using translate3d to move an object around the page when a user drags it.

When viewed with Chrome (or even Safari) you can see the box moves around very smoothly, but when viewed on an iPhone or iPad the box doesn't move smoothly at all. When using CSS transitions with translate3d on iOS the transitions are very smooth so I don't understand why this isn't. Is there a way to fix this?

Here is my javascript: (JSFiddle: http://jsfiddle.net/Ls4uc/10/ )

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];
}

Answer 1

use -webkit-perspective:1000;-webkit-backface-visibility:hidden on elements in .box

For example

'

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

'

It's works well in ios6, but ios7...