The problem with header and footer overlays on web pages

April 4, 2010

There seems to be a new annoying trend in web page design of making persistent headers or footers (or both) that don't scroll out of view when you scroll the web page but instead stay permanently visible at the top or bottom of your browser window, overlaying the conventional content. Sadly, this design element is a big fat failure (at least for me).

(I'm sure someone has also implemented a sidebar overlay too; I just haven't seen a website with one yet.)

The problem with these overlays is that they screw up normal page-based scrolling. Because these headers and footers are implemented in CSS as overlays, the browser runs the main content text all the way from the top to the bottom of the browser window; it's just that you can't see some of it. Then when I hit spacebar to scroll a page the browser scrolls the whole page as if the overlays weren't there, which means that it scrolls too much for what is actually visible.

(Browser page scrolling is designed to have a bit of overlap, which helps you reorient and be sure that you haven't missed anything. With a short overlay you might wind up with no overlap at all but be able to see all of the text; with a taller overlay, you will wind up missing some text. For example, if the browser window is currently showing lines 1-25 of the main content and you use spacebar to scroll a full page, it should wind up showing lines 25-49 or so. With an overlay, what typically happens is that the browser thinks it's showing lines 1-30, with lines 26-30 hidden under the overlay, so it scrolls to show you lines 29-53; you have no overlap and you've missed lines 26-28 entirely.)

In theory a browser could be smart enough to work out the real size of the scrollable area that you can see. In practice, I don't think that any browser is.

Sadly, the popularity of these header or footer overlays suggests that people pretty much don't do full-page scrolling these days and instead scroll incrementally with their mouse's scroll wheel (some local anecdotal evidence supports this). I notice this sort of thing because I don't have a scroll wheel mouse.

Comments on this page:

By cks at 2012-12-04 13:06:34:

An update on this: courtesy of a tweet by @eevee I discovered that this issue was reported as a bug in Firefox and worked around in August 2012. The workaround is in at least Firefox 17 and may have been in Firefox 16 as well.

This is not a complete solution, since the heuristic that Firefox uses to determine the real page area can be defeated by a sufficiently clever designer. But in common situations Firefox now does the right thing, which makes me happy.

Written on 04 April 2010.
« A DVCS advantage for open source development
An important thing about how ZFS handles spares »

Page tools: View Source, View Normal, Add Comment.
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Sun Apr 4 02:18:55 2010
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.