this is an odd one!
Overview:
I’m creating a web app and I’ve created a menu similar to the one you’d find in the Facebook app. Swipe right and it reveals, left and it hides.
I’m doing this by binding a touchstart event to the body of the page, at this point I record the start point of the finger press and also bind a touchmove and touchend event. The touch move event finds the current finger position and moves a div containing the page content by setting translate3d(x,y,z) to match the finger position.
It actually works really great.
On touchend I then work out whether the finger has moved far enough to trigger the menu to be shown or for the content to return to its original position. Regardless of the choice I apply a class which in turn applies -webkit-transition: -webkit-transform etc to the content div. I then set the decided end position, once again using translate3d(x,y,z) and also set a variable that stops any further taps from working temporally.
And this is where there is a problem!
The problem:
At this point if the content is simple with basic structure i.e. an article layout page then the transition is fast and instant. However! If the content is complex, i.e. a large table of data then there is a pause, anywhere from 1 to 30 seconds… Very frustrating.
When it does eventually work a callback unbinds the touchmove and touchend events from the body and the variable that stops taps is unset, and we’re ready to start again.
I am testing on an iPad 1. There doesn’t seem to be any correlation between the speed of the swipe and how long the pause is. Neither is there any between the distance left for the content to move.
Finally, and I think this is key!
There is a button that performs the same open close action automatically (again, like facebook) which works fine, and if you do swipe, it pauses and then you tap that button it instantly starts working, albeit in the wrong direction as it toggles based on a variable that has already been set to open. It is almost like it clears some kind of animation queue and sorts itself out…
Some code:
The javascript
$body.bind({
'touchstart': function(e){
if( !swipeBan ){
// Reset
var used = false,
triggered = false,
dir = false;
// Get start point
start.x = e.originalEvent.touches[0].pageX;
start.y = e.originalEvent.touches[0].pageY;
$body.bind({
'touchmove': function(e){
// Get current value (will be the end value too)
end.x = e.originalEvent.touches[0].pageX;
end.y = e.originalEvent.touches[0].pageY;
// If we have not chosen a direction, choose one
if( !dir ){
dir = getDir();
}else{
var left = open && dir == 'left',
right = !open && dir == 'right';
if( left || right ){
var x = left ? maxSwipe - getDist('left') : getDist('right');
$content.setTransform(x);
used = true;
triggered = left ? maxSwipe - x > swipeTrigger : x > swipeTrigger;
e.preventDefault();
}
}
},
'touchend': function(e){
// Only go further if we are going the correct direction
if( used ){
swipeBan = true;
// Get ready for animation
function done(){
// Get touching!
swipeBan = false;
// Stop animating
$content.removeClass('animate');
}
// Add animate class
$content.addClass('animate');
// Set the value
if( ( !open && triggered ) || ( open && !triggered ) ){
$content.setTransform(maxSwipe,0,function(){
done();
});
$body.removeClass('closed');
open = true;
}else if( ( !open && !triggered ) || ( open && triggered ) ){
$content.setTransform(0,0,function(){
done();
});
$body.addClass('closed');
open = false;
}
}
// Unbind everything
$body.unbind('touchmove touchend');
}
});
}else{
e.preventDefault();
}
}
});
The set transform plugin you’ll see used above.
$.fn.setTransform = function(x,y,callback){
y = y ? y : '0';
var $this = $(this);
if( callback ){
$this.one('webkitTransitionEnd',function(){
callback.apply(this);
});
}
$this.css({
'-webkit-transform': 'translate3d(' + x + 'px,' + y + '%,0)'
});
return this;
}
The CSS, very simple. There are other styles applied, but they are purely visual stuff:
#content.animate {
-webkit-transition: -webkit-transform .3s cubic-bezier(.16,0,0,1);
}
Sorry for the long post, this has been bugging me a lot! It’s at the point where I’ll have to rip it out if I can’t sort the issue.
I hope someone has seen this before, and can help. (Or can see a glaringly obvious error in the code above!)
Thanks,
Will 🙂
I solved this eventually, thought it may be useful to others!
Don’t add any classes to the page, at all, between the end of the touchmove transition and the beginning of the transition that completes the movement.
My process used to be:
position
based on distance moved.
the final position.
However, adding this class forces safari to apply any style changes which is apparently quite intensive even if there are very few or even no changes. This is the reason for the pause.
I changed my process to apply the transition using javascript instead of adding classes and it is now silky smooth.