Dragging in KineticJS moves the whole page not just the draggable

Question

I have an image filling the whole layer, the image is big so i scroll using (draggable:true on the layer), then i draw a line on top of it. The problem is in windows phone 8 when i set the height and width to the device's height and width, the width is fine but the height is too long more than double the phone's height, scrolling right and left is sluggish (moves 1 frame per touchevent), scrolling up and down scroll the page it self (since it's tall) but not the content of the layer. Also when i add the line in a separate function it's not shown at all.

<div id="content" data-role="content" class="high">
        <script type="text/javascript" src="javascript/map.js"></script>

        <script>
             var stage = new Kinetic.Stage({
                container: 'content',
                width: window.innerWidth,
                height: (window.innerHeight * 73) / 100
            });

            var layer = new Kinetic.Layer({
                draggable: true
            });

            var imageObj = new Image();
            imageObj.onload = function () {
                var yoda = new Kinetic.Image({
                    x: 0,
                    y: 0,
                    image: imageObj,
                    width: 1964,
                    height: 1289

                });
                layer.add(yoda);
                stage.add(layer);
            }
            imageObj.src = 'image/map-04.png';

            navigate("A","B");

        </script>
</div>

and here is the navigate function

function navigate(from, to, layer) {
    var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round'
    });

    layer.add(redLine);
    layer.draw();
}

Here is a JSFiddle http://jsfiddle.net/3LpVS/

Thanks in Advance.

Answer 1

I ran into a very similar issue recently that was caused by window.innerHeight being inaccurate. The simple fix was to add a viewport meta tag to the top of my document.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">