title: canvas inside a div with overflow-y
body: <p>I have a div with overflow-y and inside it a canvas.
  When I scroll down, I'm getting at the bottom a strip in FF, Chrome and IE9.
  How can I make this strip go away?</p>
  
  <p>The red strip can be seen <a href="http://jsbin.com/etipez/2/edit#preview" rel="nofollow">here</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;style&gt;
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  
    #container {
      overflow-y: scroll;
      width: 900px;
      height: 400px;
      background-color: red;
    }
  
    #container canvas {
      background-color: gray;
    }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
    var init = function() {
      var container = document.getElementById('container');
      var canvas = document.createElement('canvas');
      canvas.width = container.clientWidth;
      canvas.height = 1000;
      container.appendChild(canvas);
      container.scrollTop = container.scrollHeight;
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
    &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>