The Curious Case of the Giant Scrollbar
Tuesday, February 3rd, 2009Recently I fixed bug 439269 (”AMO theme has unnecessary scrollbar at the bottom”) and thought it was an interesting bug for a few reasons.
To summarize the issue, for no apparent reason in right-to-left languages a really long scrollbar would appear at the bottom of the window.
Even though there was a scrollbar, when you scrolled all the way to the left, nothing was there. Another reason this was odd was the scrollbar only appeared in right-to-left (RTL) languages. Inspecting the page via Firebug didn’t give any clues as to what was causing the issue as there was no element hidden somewhere onscreen. Finally, to make things even weirder, the scrollbar only appeared when JavaScript was turned on.
After some thought, I had a feeling that we might be using absolute positioning to position an element to the left and above the page offscreen, which is quite common. In a RTL page, however, left is does not move an element outside a page’s boundaries. So the result is you get a scrollbar.
So what’s a web developer to do? Firebug to the rescue! I popped it open and started typing some JavaScript into the console to find an element that seemed really far offscreen:
var nodes = document.getElementsByTagName("*");
for(var i=0; i < nodes.length;i++) {
var node = nodes[i];
if(node.offsetLeft < -500) {
console.log(node);
}
}
And Firebug’s console spit out:
<ul id="cat-list">
Ah-ha! Now I was getting somewhere. A quick search through our CSS files for ‘#cat-list’ found an interesting line of code:
#categories.collapsed #cat-list {
position: absolute;
left: -999em;
top: -999em;
}
And when JavaScript is turned on, the class ‘collapsed’ is added to the parent node #categories. In RTL mode this creates a huge scrollbar because -999em to the left of the page is a valid location that a user can scroll to. The solution?
.html-rtl #categories.collapsed #cat-list {
position: absolute;
left: 999em;
top: -999em;
}
On any pages that are RTL, we add the class ‘html-rtl’ to the body tag in order to change the layout for RTL languages. This fixes the issue by moving the category list offscreen to the right, which is outside the page in RTL mode.
Things to remember:
- Firebug is your friend
- The DOM is a live document you can inspect, utilize this feature
- Be careful with positioning with sites that are LTR and RTL
