PDA

View Full Version : Scroller jumps on second finger touch.



sachmata
4 Aug 2011, 1:37 AM
Sencha Touch version tested:

1.1.0


only default resources/css/sencha-touch.css

Platform tested against:

iOS 4.x (iPod)

Description:

On panel with scrolling enabled single touch moving perform a drag(scroll), when second finger touches the screen scroller rapidly changes position (jumps). I am implementing pinch zoom behaviour and trying to pinch with enabled scroller becomes unusable. I am disabling the scroll in 'pinchstart' event handler (and later enabling it on 'pinchend') but this event is called after processing the drag events from scroller code.

Test Case:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />


<title>Scroll position jump on second touch</title>

<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">

<style type="text/css">
.grid {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIUlEQVQYV2OMq7zlw0AEYAQpXNSutoWQ2lGFeEOI6OABAGfyJggVi5D1AAAAAElFTkSuQmCC);
}
</style>

<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function () {
var viewport = new Ext.Panel({
fullscreen: true,
scroll: 'both',


dockedItems: [{
xtype: 'toolbar',
title: 'Jump on Second Touch',
dock: 'top'
}],


items: [{
cls: 'grid',
height: 5000,
width: 5000
}]
});

viewport.scroller.setOffset({
x: -2000,
y: -2000
});
}
});
</script>
</head>
<body></body>
</html>




Steps to reproduce the problem:

perform pinch gesture

The result that was expected:

drag(scroll) only with first finger touched until pinch is detected

The result that occurs instead:

jumping of scroller usually to the end of scroll

Debugging already done:

second touch causes tap events to be fired with large coordinates offset than first touch, the scroller doesn't separate the events coming from the first and second finger and interpreters them as rapid moving of single touch until pinch situation is detected.

Possible fix:

unique identifying single touch sequence, for example assigning ID on every touch source (finger)
single touch events to filter incoming events by this unique ID