title: A very, very, very big div
body: <p>For a project of mine (see <a href="http://bigpictu.re/demo" rel="nofollow noreferrer">BigPictu.re</a> or <a href="http://github.com/josephernest/bigpicture.js/" rel="nofollow noreferrer">bigpicture.js GitHub project</a>), I have to deal with potentially a very, very, very big <code>&lt;div&gt;</code> container.</p>
  
  <p>I knew there was a risk of poor performance with the simple approach I use, but I did not expect it to be mostly present with ... Chrome only!</p>
  
  <p>If you test <a href="http://gget.it/caveot4g/big-div-test.html" rel="nofollow noreferrer">this small page</a> (see code below), panning (click + drag) will be:</p>
  
  <ul>
  <li>Normal / smooth on Firefox</li>
  <li>Normal / smooth even on Internet Explorer</li>
  <li>Very slow (nearly crashing) on Chrome!</li>
  </ul>
  
  <p>Of course, I could add some code (in my project) to do that when you're zoomed in a lot, text with potentially very very big font-size would be hidden. But still, <strong>why does Firefox and Internet&nbsp;Explorer handle it correctly and not Chrome?</strong></p>
  
  <p><strong>Is there a way in JavaScript, HTML, or CSS to tell the browser <em>not to try</em> to render the whole page (which is 10000 pixels wide here) for every action?</strong> (only render the current viewport!)</p>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;style&gt;
              html, body {
                  overflow: hidden;
                  min-height: 100%; }
  
              #container {
                  position: absolute;
                  min-height: 100%;
                  min-width: 100%; }
  
              .text {
                  font-family: "Arial";
                  position: absolute;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;div class="text" style="font-size: 600px; left:100px; top:100px"&gt;Small text&lt;/div&gt;
              &lt;div class="text" style="font-size: 600000px; left:10000px; top:10000px"&gt;Very big text&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              var container = document.getElementById('container'), dragging = false, previousmouse;
              container.x = 0; container.y = 0;
  
              window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }
  
              window.onmouseup = function() { dragging = false; }
  
              window.ondragstart = function(e) { e.preventDefault(); }
  
              window.onmousemove = function(e) {
                  if (dragging) {
                      container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
                      container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
                      previousmouse = {x: e.pageX, y: e.pageY};
                  }
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>