title: Issues with very tall web pages on Safari 6+ and Mobile Browsers
body: <h2>The very tall web page</h2>
  
  <p>My web app displays "documents" as a vertical sequence of images. </p>
  
  <p>Every image represents a page of the document.</p>
  
  <p>Images are <strong>not</strong> loaded at startup, instead they are lazy-loaded:</p>
  
  <ul>
  <li><p>for every page a placeholder of the same size (an empty div with a gray background and specified size) is placed into the DOM at startup (at document ready, with a JavaScript routine);</p></li>
  <li><p>when a page enters the viewport (and stays inside for at least 0.25 seconds) it's image is loaded from the server over the placeholder;</p></li>
  </ul>
  
  <p>Basically I've implemented the basic behaviour of most desktop Readers like Preview or Acrobat Reader: the user browses a document scrolling up/down the content of the window.</p>
  
  <p>Some documents have lot of pages (300 or more), every page is about 850px tall: as the 300+ gray placeholders are injected into the DOM...</p>
  
  <p><strong>the web page may become several thousands pixels tall</strong></p>
  
  <p>When I started my project (about one year ago) considered this a <em>borderline</em> condition for browsers: web pages are not meant to be 240.000px tall! So I made tests (I was targeting desktop browser initially).</p>
  
  <p><strong>Surprisingly the</strong> <code>very-tall-web-page</code> <strong>was not an issue at all!</strong> All the browsers (IE8 included) didn't suffer at all. In fact the JavaScript was light, the DOM contained a reasonable number of nodes and -although the "logical" size of the page was huge- the browsers were smart enought to render only what needed to be displayed onscreen.</p>
  
  <h2>Safari 6 and Safari 7</h2>
  
  <p><code>very-tall-web-page</code> became an issue.</p>
  
  <p>It seems the browser is attempting to render the whole web page (!) in <strong>ram</strong>: this involves using a lot of cpu, a lot of ram and a lot of time (browser is poorly responsive, scrolling and resizing hangs often).</p>
  
  <p>If I remove the gray placeholders, the fixed background pattern I added, everything... and leave nothing but a long, white, empty web page nothing changes.</p>
  
  <p>If I trigger <strong>graphic-acceleration</strong> applying <code>-webkit-transform: translatez(0);</code> to the <code>body</code> Safari becomes responsive again on window resizing and scrolling (as long I stay on the topmost part of the web page). But if I go down to the middle/bottom then scrolling hangs again and the page takes several seconds to update.</p>
  
  <p>At least, once the page is redrawn, resizing remains responsive.</p>
  
  <h2>Mobile Browsers</h2>
  
  <p>Since the beginning <code>very-tall-web-page</code> was an issue on iPad and mobile devices.</p>
  
  <p>Mobile Safari was running out of memory and crashing with just 10-15 page-images documents.</p>
  
  <p>Triggering <strong>graphic-acceleration</strong> solved again partially the problem.</p>
  
  <p>No crash but if I scroll down too much it hangs for some time and is unable to render the page (it stays white).</p>
  
  <h2><strong>Questions</strong></h2>
  
  <p>Is there anything I can make the <code>very-tall-web-page</code> work on Safari 6 / 7?</p>
  
  <p>Is there any trick I can do to let it run on Mobile browsers?</p>
  
  <p>Is the <code>very-tall-web-page</code> something that should be avoided anyway even when targeting desktop browsers?</p>
  
  <h2><strong>--EDIT--</strong></h2>
  
  <p>The issue was fixed on Safari (Desktop) on version <strong>7.1</strong></p>