Can't scroll over shape or image in ipad - ios

Question

When I create a shape or image and draw it onto the stage, on the iPad i cant scroll over the shape.
For example, if my stage is bigger than the iPad's dimensions in width or height and i want to perform a scroll to see the rest of the stage or image, the stage is locked thus not allowing me to scroll.
Can anyone explain my this is happening?
I have tried with native canvas image and this is not the case. Is this a bug? Below is my code.
var mode = "";
var points = [];
var templayer = new Kinetic.Layer();
var activeShape = '';
var color = '#46468f';
var opacity = 0.2;
var stroke;
var link;
var userMode = 'edit';
var stage = new Kinetic.Stage({
container: 'stage',
width: 768,
height: 844
});
var stageWidth = stage.getWidth();
var stageHeight = stage.getHeight();
//var background = new Kinetic.Layer();
//var bgImage = new Kinetic.Image('images/room2.jpg');
var layer = new Kinetic.Layer();
var rectGroup = new Kinetic.Group({
x: 0,
y: 0,
draggable: false
});
console.log('Adding group');
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: stageWidth,
height: stageHeight,
fill: color,
opacity: opacity,
stroke: 'black',
draggable: false,
listening: true,
name: 'rect',
type: 'productTouch',
strokeWidth: 2,
done: false
});
console.log('Adding layer');
var layer = new Kinetic.Layer();
rectGroup.add(rect);
layer.add(rectGroup);
layer.draw();
stage.add(layer);

Answer 1

I have had this same issue. Maybe it's one of these:
1...
Make sure some of these variables are not set... try commenting out any of these and see if the behavior changes...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, usr-scalable=no" />
2...
Check to see if you have enabled a css feature to allow scrolling to occur...
overflow-y: auto; (on some div you have?)

Answer 2

I fixed this bug when create layer
var layer = new Kinetic.Layer({hitGraphEnabled : false});

Answer 3

This is a bit of an ugly hack to try to imitate both pinchzoom and scrolling on the ipad with kinetic.js with the help of panzoom.js touchswipe.js and Jquery.kinetic.js (name is just coincidental)
https://github.com/timmywil/jquery.panzoom/blob/master/
http://davetayls.me/blog/2011/06/14/jquery-kinetic-plugin-smooth-scrolling/#disqus_thread
var isiPad = navigator.userAgent.match(/iPad/i) != null;
$(function() {
if(isiPad){
$('body, html').kinetic();
$("#wrapper").panzoom({
disablePan: true,
minScale: 1,
maxScale: 4
});
//Enable swiping...
$("#stage").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
$("#wrapper").panzoom("reset");
},
threshold:0
});
}
});