0

私は 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];
}
4

1 に答える 1

0

-webkit-perspective:1000;-webkit-backface-visibility:hidden を .box の要素に使用

例えば

'

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

'

ios6では問題なく動作しますが、ios7では...

于 2013-09-22T03:23:46.550 に答える