The very tall web page
My web app displays "documents" as a vertical sequence of images.
Every image represents a page of the document.
Images are not loaded at startup, instead they are lazy-loaded:
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);
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;
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.
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...
the web page may become several thousands pixels tall
When I started my project (about one year ago) considered this a borderline condition for browsers: web pages are not meant to be 240.000px tall! So I made tests (I was targeting desktop browser initially).
Surprisingly the very-tall-web-page
was not an issue at all! 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.
Safari 6 and Safari 7
very-tall-web-page
became an issue.
It seems the browser is attempting to render the whole web page (!) in ram: 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).
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.
If I trigger graphic-acceleration applying -webkit-transform: translatez(0);
to the body
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.
At least, once the page is redrawn, resizing remains responsive.
Mobile Browsers
Since the beginning very-tall-web-page
was an issue on iPad and mobile devices.
Mobile Safari was running out of memory and crashing with just 10-15 page-images documents.
Triggering graphic-acceleration solved again partially the problem.
No crash but if I scroll down too much it hangs for some time and is unable to render the page (it stays white).
Questions
Is there anything I can make the very-tall-web-page
work on Safari 6 / 7?
Is there any trick I can do to let it run on Mobile browsers?
Is the very-tall-web-page
something that should be avoided anyway even when targeting desktop browsers?
--EDIT--
The issue was fixed on Safari (Desktop) on version 7.1