title: kinetic js ipad scrolling
body: <p>I previously had an HTML5 canvas based application that I recently converted to using Kinetic JS.  I was able to enable scrolling in desktop browsers and IOS by simply using overflow: auto on the encompassing div.  Since converting over to using Kinetic scrolling no longer functions on mobile/iPad devices.  </p>
  
  <p>I have tried working around this issue a few different ways though I am a bit stuck.  First I tried using touchscroll though for various reasons this didn't work for me (things did scroll though the library is causing other issues).  Next I tried adding the -webkit-overflow-scrolling: touch options to my div's style though this didn't seem to have any effect.  </p>
  
  <p>Is there a standard way of scrolling a Kinetic JS canvas that is larger than your viewable area/div?</p>
  
  <p>Here is an example.  If you view the example on an IOS device (iPad, iPhone, etc) you will notice that the top canvas does not scroll within the div while the bottom one does.</p>
  
  <p><a href="http://jsfiddle.net/blueshirts/uERVq/26/" rel="nofollow">http://jsfiddle.net/blueshirts/uERVq/26/</a></p>
  
  <pre><code>&lt;!-- KineticJS canvase, won't scroll on IOS devices. --&gt;
  &lt;div id="container" style="overflow: auto; width: 400px; height: 400px; background-    color: gray"&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;!-- Vanilla HTML5 Canvas, does scroll on IOS devices. --&gt;
  &lt;div id="canvasContainer"
       style="width: 400px; height: 400px; overflow: auto; background-color: red"&gt;
      &lt;canvas id="vanillaCanvas"
              width="800" height="600"&gt;
      &lt;/canvas&gt; 
  &lt;/div&gt;
  
  // Create a stage instance that is larger than its parent div.
  var stage = new Kinetic.Stage({
      container: 'container',
      width: 800,
      height: 600
  });
  
  // Create a layer.
  var layer = new Kinetic.Layer();
  
  // Add some text...
  var text = new Kinetic.Text({
      text: "KineticJS generated Canvas that won't scroll to IOS touches...",
      x: 0,
      y: 0,
      fontSize: 12,
      fontFamily: 'Calibri',
      textFill: 'Black'                
  });
  layer.add(text);
  
  // Add a rectangle to the layer so you can see if the content scrolls.
  var rect = new Kinetic.Rect({
      x: 50,
      y: 50,
      width: 200,
      height: 100,
      fill: "yellow",
      stroke: "black",
      strokeWidth: 7
  });
  layer.add(rect);
  
  // Add the layer to the stage.
  stage.add(layer);
  
  
  // Create a "vanilla" canvas instance and draw the same rectangle on it.
  var canvas = document.getElementById('vanillaCanvas');
  var context = canvas.getContext('2d');
  
  context.beginPath();
  context.rect(50, 50, 200, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
  </code></pre>
  
  <p>Edit:</p>
  
  <p>Could be wrong though seems to me that this issue is caused by the fact that Kinetic is registering for touchmove events (and others) in the Stage class.  In the handler it run's preventDefault which seems to stop mobile browsers from executing their default scroll behavior.  If "I" had registered for touchmove events this would probably be desirable.  Would be nice if Kinetic didn't register and handle events that I am not interested in.  </p>
  
  <pre><code> _touchmove: function(evt) {
       this._setUserPosition(evt);
       var dd = Kinetic.DD;
       evt.preventDefault();
  </code></pre>
  
  <p>I am able to demonstrate this issue here: <a href="http://jsfiddle.net/blueshirts/P9RaT/28/" rel="nofollow">http://jsfiddle.net/blueshirts/P9RaT/28/</a></p>