Create a gist now

Instantly share code, notes, and snippets.

anonymous /index.html
Created Nov 9, 2012

on iOS6 jQuery.animate fails on an element after touchmove listener is called without e.preventDefault
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en-US"><!--<![endif]-->
<title>iOS 6 jQuery Animate Failure</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
.pagewrap { width:940px; margin:0 auto;}
#swipebox {
width:100%; height:300px;
#swipebox img {
top:0; left:0;
.fillerbox {
padding:200px 100px;
margin:0 auto;
.fillerbox ul {
<div class="pagewrap">
<div class="fillerbox">
In iOS6 Mobile Safari
<li>Swipe picture below left/right and notice how it animates back to the left edge</li>
<li>Touch the picture and scroll the page up/down</li>
<li>Repeat left/right swipe and notice the picture does NOT animate back to the left edge</li>
<li>It appears jQuery animate fails after touchmove occurs without e.preventDefault</li>
<div id="swipebox">
<img src="" alt="" />
<div class="fillerbox">This box is only here to make the page large enough to scroll</div>
</div><!-- .pagewrap -->
<script src=""></script>
jQuery(document).ready(function() {
/* The goal of this code is to create a horizontal javascript scrollable image in #swipebox
* In addition to the horizontal javascript controlled scrolling
* If the user wants to scroll the page vertically by clicking on the image and
* dragging up/down, I want this behavior to pass through
* For example, on a small screen the image may take up the entire area and strand
* the user on that part of the page
var el = document.getElementById("swipebox"),
$slider = $('#swipebox').find('img'),
startX, startY, dx, dy,
animateH = false,
animateV = false;
var onTouchStart = function(e) {
startLeft = parseInt($slider.css('left'), 10) || 0;
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
var onTouchMove = function(e) {
dx = e.touches[0].pageX - startX;
dy = e.touches[0].pageY - startY;
if (
animateH ||
(!animateV && Math.abs(dx) > 5)
) {
// prevent default, we are scrolling horizontally,
animateH = true;
$slider.stop().css({'left': startLeft+dx*2});
} else if (Math.abs(dy) > 5) {
// do NOT prevent default, we are scrolling the page vertically
animateV = true;
} else {
// direction of scroll is undetermined at this time
// we've moved less than 5px in any direction
return false;
var onTouchEnd = function(e) {
$slider.stop().animate({'left': 0}); // animate image back to left
animateH = false;
animateV = false;
var onTouchCancel = function(e) {
el.addEventListener('touchstart', onTouchStart, false);
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
el.addEventListener("touchcancel", onTouchCancel, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment