2

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

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.