Question

我正在开发一个iOS设备项目，我正在使用translate3d在用户拖动它时在页面周围移动一个对象。

使用Chrome（甚至是Safari）观看时，您可以看到该框非常流畅地移动，但在iPhone或iPad上观看时，该框根本无法平滑移动。在iOS上使用带有translate3d的CSS转换时，转换非常顺利，所以我不明白为什么不是这样。有办法解决这个问题吗？

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

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

例如

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

它在ios6中运行良好，但是ios7 ......

translate3d在iOS上滞后

1 个答案: