Take the 2-minute tour ×

this is an odd one!

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

    '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;

                '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();


                        var left = open && dir == 'left',
                            right = !open && dir == 'right';

                        if( left || right ){

                            var x = left ? maxSwipe - getDist('left') : getDist('right');


                            used = true;
                            triggered = left ? maxSwipe - x > swipeTrigger : x > swipeTrigger;




                '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


                        // Add animate class

                        // Set the value
                        if( ( !open && triggered ) || ( open && !triggered ) ){



                            open = true;

                        }else if( ( !open && !triggered ) || ( open && triggered ) ){



                            open = false;



                    // Unbind everything
                    $body.unbind('touchmove touchend');






The set transform plugin you'll see used above.

$.fn.setTransform = function(x,y,callback){

    y = y ? y : '0';

    var $this = $(this);

    if( callback ){





        '-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!)


Will :)

share|improve this question
I'm struggling with a similar issue, though my use case is significantly more complicated and I don't have room to explain it here. I also don't have an answer. However, I ran my app under Instruments to see what was happening and it looks to me like WebKit is stuck in a loop trying to calculate styles for part of the page. My theory is that the style calculation misses some kind of deadline and the transition never increments forward. No transitions seem to work, but triggering a full style recalculation fixes it. I'd suggest simplifying your CSS and see if that helps. –  Kris Giesing Feb 26 '12 at 17:52
Yea, I've been ripping out styles in an effort to fix it. As you may expect, anything with opacity or blur speeds things up, mostly shadows. It's a shame as the actual swiping is nice and fast regardless of the content being moved. Thanks anyway though Kris. –  will Feb 27 '12 at 9:35
add comment

1 Answer

up vote 0 down vote accepted

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:

  1. On touchstart get finger x
  2. On touchmove position element based on current position and start position
  3. On touch end, decide whether to continue or reverse the animation based on distance moved.
  4. Add a class of close or open to the parent element that determines 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.

share|improve this answer
add comment

Your Answer


