public
anonymous / index.html
Created

on iOS6 jQuery.animate fails on an element after touchmove listener is called without e.preventDefault

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
<!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]-->
<head>
<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;
position:relative;
overflow:hidden;
 
}
#swipebox img {
position:absolute;
top:0; left:0;
}
.fillerbox {
padding:200px 100px;
font-size:28px;
color:#fff;
background-color:blue;
text-align:center;
font-family:sans-serif;
margin:0 auto;
}
.fillerbox ul {
text-align:left;
}
</style>
</head>
<body>
<div class="pagewrap">
<div class="fillerbox">
In iOS6 Mobile Safari
<ul>
<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>
</ul>
</div>
<div id="swipebox">
<img src="http://i.imgur.com/ktKLI.jpg" alt="" />
</div>
 
<div class="fillerbox">This box is only here to make the page large enough to scroll</div>
</div><!-- .pagewrap -->
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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,
startLeft,
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});
e.preventDefault();
} 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
e.preventDefault();
}
return false;
};
var onTouchEnd = function(e) {
$slider.stop().animate({'left': 0}); // animate image back to left
e.preventDefault();
animateH = false;
animateV = false;
};
 
var onTouchCancel = function(e) {
console.log('onTouchCancel');
};
 
el.addEventListener('touchstart', onTouchStart, false);
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
el.addEventListener("touchcancel", onTouchCancel, false);
});
 
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.