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 回答