Comments on: The Curious Case of the Giant Scrollbar

By: Andrew Mason

Andrew Mason — Wed, 06 May 2009 14:29:03 +0000

I ran across the same issue when working on a localisation project. A simple fix is to use:

overflow: hidden;

…on the parent element to clip the child off.

Bonus tip: The same trick of setting overflow: hidden; on the parent element prevents the focus dashed outline from stretching across the page when using image replacement technique with links.

By: confiq

confiq — Fri, 27 Feb 2009 13:35:27 +0000

–edit–
Hi rdoherty!
As one that writes lot of RTL sites i found this bug frustrating.
Unfortunately i put display: none if i don’t have access to external JS (ex. facebook connect) but most of cases i resolve as you did…
Instead of left: 999em i write right: 999em;…

regards

By: rdoherty

rdoherty — Fri, 06 Feb 2009 00:58:42 +0000

Good questions:

@Daniel
display:none; hides the content from screen readers, which is not a good experience because most screen readers do not detect the DOM changing, which it does when the list expands. So blind or visually impaired users would never ‘see’ the category list.

@Simon:
visibility:hidden; leaves elements in the document flow, so it could affect other element’s display even when hidden.

@Dan & Noel
top: -999em would get it offscreen, but there is a slight possibility that the element you are moving could have a width wide enough to cause a scrollbar. Especially if you are using a standard class of ‘.hidden’ for multiple elements.

By: Neil Rashbrook

Neil Rashbrook — Wed, 04 Feb 2009 13:22:52 +0000

This only raises more questions… why move the element at all? If as I’m assuming it’s for perf reasons, why not just move the element off the top only?

By: Noel Grandin

Noel Grandin — Wed, 04 Feb 2009 11:10:35 +0000

Wouldn’t a position of
{ left: 0em; top:-999em; }
move the element off-screen no-matter the language orientation?

By: Dan

Dan — Wed, 04 Feb 2009 03:36:26 +0000

Or since you’re already moving it off the top 999px, just have it left: 0px;

Unless there exists a bottom to top language, then we have a problem. ;P

I personally hide stuff with display: none; instead of moving it offscreen. Might be some reason whoever made that opted not to do it that way…

By: Robin

Robin — Tue, 03 Feb 2009 23:38:54 +0000

Ah, interesting issue. Will have to bear that in mind should I do any RTL sites.

By: Simon

Simon — Tue, 03 Feb 2009 22:50:53 +0000

Out of curiosity, why use off-screen positioning to hide the element? Wouldn’t it be simpler to use visibility:hidden or display:none instead?

By: Daniel Einspanjer

Daniel Einspanjer — Tue, 03 Feb 2009 22:00:20 +0000

Why do you need to use an absolute offscreen position for that collapsed list of categories? It seems like a display:none would be easier?