I have a current project focused on iOS devices, where I am utilizing translate3d to enable object movement on the page through user drag interactions.
Interestingly, I noticed that when viewed in Chrome or Safari, the box moves smoothly around the screen. However, this smoothness is not replicated when viewing it on an iPhone or iPad. While CSS transitions with translate3d generally provide smooth transitions on iOS devices, I'm puzzled as to why this issue persists. Is there a solution to improve the performance?
Below is the snippet of my JavaScript code: (JSFiddle link: 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];
}