Open Radar

 
Summary:
Adding an ontouchmove handler in an ontouchstart event cannot use event.preventDefault() to prevent scrolling in iOS 10.

Steps to Reproduce:
1. See attached ios-10-touch-regression.html

Expected Results:
I expect that the web page does not scroll when dragging the box.

Actual Results:
The webpage incorrectly scrolls when dragging the box.

Version:
iOS only, as it only supports touch events.

Notes:
This affects Tumult Hype (http://tumult.com/hype/) and many of our clients/users.

Configuration:
iOS 10 regression; works correctly on (at least) iOS 7 through 9.3.


Attachments:
'ios-10-touch-regression.html' was successfully uploaded.

============ file contents:

<!--

Description: 
	This bug shows that an element which adds an ontouchmove handler in its ontouchstart event cannot properly preventDefault() and prevent scrolling.  On iOS 9.3 and below, dragging the box would not scroll the page. On iOS 10, it will scroll teh page.
	This is an iOS 10 regression; it works on iOS 9.3 and below.

Reported by:
	Jonathan Deutsch
	jonathan@tumult.com
	Founder, Tumult Inc.
	http://tumult.com/hype/

-->

<style>

#box {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 100px;
	left: 100px;
	border: 1px solid #333;
	background-color: #eef;
	font-size: 9px;
}

</style>

<div id = "box">drag me<br></div>

<script>

var box = document.getElementById("box");

box.ontouchstart = (function (e) {
	box.innerHTML += "start ";

	box.ontouchmove = (function (e) {
		box.innerHTML += "move ";
		e.preventDefault();
	});
});

box.ontouchend = (function (e) {
	box.innerHTML += "end ";
	box.ontouchmove = null;
});

</script>