Firefox Bug: Status Bar Zaniness

Since this issue took me a little while to figure out, I think it’s worth documenting here for future Googlers. Apparently it’s a known bug but as far as I can tell, there seems to be little general awareness of it amongst web developers.

Last week I was working on a some floated buttons and needed them to wrap from a flat, horizontal layout to a vertically stacked layout whenever the window narrowed beyond a certain width. After finding they consistently preferred to prop my window open rather than wrap, I decided to break them out into a simplified test case.

Nothing changed. Although the buttons still had ample space to float in, at a certain point some invisible force was propping open the window — it was like a long, invisible pixel-shim GIF (remember them?) had been snuck into the layout. In fact, even when I broke the layout down to lonesome H1, I saw the same behavior. Were the elements inheriting CSS width from some other source? If so, where? I was stumped.

--ADVERTISEMENT--

Out of ideas, I sat there absentmindedly scaling the window in and out, in and out when I noticed the misbehaviour seemed to occur at exactly the time that the icons in my status bar ran out of space. I did some more testing and sure enough, removing a handful of icons from the status bar changed the page rendering behaviour inside my window.

Clearly decisions made at the browser chrome level shouldn’t be impacting page rendering.

Now there’s every reason to believe this has been an issue in Firefox since day one. The problem has been the increasing tendency over the last 18 months of extension authors to use the status bar. Although I must admit to being an extension junkie, even a basic web developers kit now often includes:

HTML Validator

Firebug

Screengrab

Dust Me Selectors

No Scripts

Throw in common browsing aids like Adblock, Stylish, Greasemonkey and Gmail Manager and this is becoming an issue that is we’ll likely see more of every day.

Hopefully this bug is moving up the Mozilla hit list, but until it’s fixed I do found a workaround. ‘AutoHideStausbar‘ allows you tuck the status bar away while you work on width sensitive layouts.

Somewhat ironically, it adds one more icon to your status bar, but at least gives you the ability to toggle your status bar issues away.

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for Sitepoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involvement in the planning, development, production and marketing of a huge range of printed and online products and references. And has designed over 40+ of SitePoint's book covers.