javascript - iOS上的translate3d落后

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

在使用Chrome（甚至是Safari）浏览时，您可以看到该框非常平滑地移动，但是在iPhone或iPad上浏览时，该框根本无法平滑移动。在iOS上将CSS过渡与translate3d一起使用时，过渡非常顺畅，所以我不明白为什么不是这样。有没有办法来解决这个问题？

这是我的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];
}

最佳答案

使用-webkit-perspective：1000; -webkit-backface-visibility：隐藏在.box中的元素上

例如

'

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

'

在ios6中效果很好，但是ios7 ...

关于javascript - iOS上的translate3d落后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18641469/