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.
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
- 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.