Android5.1でタッチイベントが取得できなかった

Android5.1でタッチイベントが取得できない現象に遭遇したので、一応解決した方法をメモしておきます。

サンプルコード

やろうとしたことは、要素をfloatで横並びにして、その親要素をタッチイベントで左右に動かすというものでした。

HTML

<div id="contents">
	<ul class="swipe">
		<li><img src="http://placehold.it/240x240/000000/ffffff" width="120"></li>
		<li><img src="http://placehold.it/240x240/222222/ffffff" width="120"></li>
		<li><img src="http://placehold.it/240x240/444444/ffffff" width="120"></li>
		<li><img src="http://placehold.it/240x240/666666/ffffff" width="120"></li>
		<li><img src="http://placehold.it/240x240/888888/ffffff" width="120"></li>
		<li><img src="http://placehold.it/240x240/aaaaaa/ffffff" width="120"></li>
	</ul>
</div>

CSS

#contents {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.swipe {
	position: relative;
	left: 0;
}
.swipe li {
	float: left;
	width: 120px;
}

JavaScript

$(function() {
	var swWrap = $('.swipe').parent();
	var swEleW = $('.swipe').children().outerWidth(true);

	$('.swipe').css({
		width: $('.swipe').children().length * swEleW
	});

	// 初期位置
	var basePoint;

	// 移動する要素にイベントが発生した時
	$('.swipe').bind({
		// タッチ開始
		'touchstart': function(e) {
			e.preventDefault();
			// 画面の左端からの座標
			this.pageX = event.changedTouches[0].pageX;
			// basePointとthis.leftに現在のleftの値(0)を追加
			basePoint = this.left = parseFloat($(this).css('left')); 
			this.touched = true;
		},
		// タッチ中
		'touchmove': function(e) {
			if(!this.touched) {
				return;
			}
			e.preventDefault();
			// 移動要素のleftに入れる値
			this.left = parseFloat($(this).css('left')) - (this.pageX - event.changedTouches[0].pageX);
			$(this).css({
				left: this.left
			});
			// 画面の左端からの座標
			this.pageX = event.changedTouches[0].pageX;
		},
		// タッチ終了
		'touchend': function(e) {
			if(!this.touched) {
				return;
			}
			this.touched = false;
		}
	});
});

Android5.1でタッチイベントが取得できなかった場合のデモページ
　

解決方法1

原因がfloatだけかは分かりませんが、floatでの横並びをdisplay: inline-block;にすると、タッチイベントが取得できました。

CSS

#contents {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.swipe {
	position: relative;
	left: 0;
}
.swipe li {
	display: inline-block;
	width: 120px;
}

解決方法1のデモページ
　

解決方法2

floatで横並びを実装したい場合、floatを指定している要素にposition: relative;を指定するとタッチイベントが取得できました。

CSS

#contents {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.swipe {
	position: relative;
	left: 0;
}
.swipe li {
	position: relative;
	float: left;
	width: 120px;
}

解決方法2のデモページ