anonymous / index.html
Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View index.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.