StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I stop mobile Safari from pausing before beginning a transition
text
Body
copied!<p>this is an odd one!</p> <p><strong>Overview:</strong><br> 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.</p> <p>I'm doing this by binding a <em>touchstart</em> event to the body of the page, at this point I record the start point of the finger press and also bind a <em>touchmove</em> and <em>touchend</em> event. The touch move event finds the current finger position and moves a div containing the page content by setting <em>translate3d(x,y,z)</em> to match the finger position.</p> <p>It actually works really great.</p> <p>On <em>touchend</em> 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 <em>-webkit-transition: -webkit-transform etc</em> to the content div. I then set the decided end position, once again using <em>translate3d(x,y,z)</em> and also set a variable that stops any further taps from working temporally.</p> <p>And this is where there is a problem!</p> <p><strong>The problem:</strong> <br>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.</p> <p>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.</p> <p>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.</p> <p><strong>Finally, and I think this is key!</strong><br> 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...</p> <p><strong>Some code:</strong><br> The javascript</p> <pre><code>$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(); } } }); </code></pre> <p>The set transform plugin you'll see used above.</p> <pre><code>$.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; } </code></pre> <p>The CSS, very simple. There are other styles applied, but they are purely visual stuff:</p> <pre><code>#content.animate { -webkit-transition: -webkit-transform .3s cubic-bezier(.16,0,0,1); } </code></pre> <p>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.</p> <p>I hope someone has seen this before, and can help. (Or can see a glaringly obvious error in the code above!)</p> <p>Thanks,</p> <p>Will :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload