Large blank gap between question list and pager

Question

Description

In the "Question" and "Unanswered" pages, there's a large gap between the list of questions and the pager when the page is displayed in Webkit-based browsers (Google Chrome 2 and Safari 4).

Steps to reproduce

1. Use either Google Chrome 2 or Safari 4 (or any Webkit based browsers)
2. Log into Stackoverflow
3. Enable the "Hide Ignored Tag" preference flag (located in the Profile page, under the "prefs" tab)
4. Enter into either the "Questions" or "Unanswered" pages
5. Scroll down to the end of question list

It is to be noted that the gap will disappear if the page has been zoomed-in/out once.

Environment

Windows Vista, Google Chrome 2 or Safari 4

Screenshot (as of 3 July 2009)

References

Uservoice reference

Answer 1

In Safari on Mac I put position: absolute; on the .pager class and the problem went away.

I tried several other things to no avail. Webkit seems to calculate the height of the questions column before hiding the display: none; questions, though I could be wrong.

There are a lot of floats on the page, sometimes browsers can get confused.

Answer 2

Not really a bug, it's from your tag filter. Questions are removed on the client side adding a gap where each removed question would normally fill space. (90% sure).

If this is the case I suppose it could be improved.

Let me know if I'm wrong.

Answer 3

Here's what I tried. I removed the "zoom:1" style from the #container and that collapsed everything properly. At least when I did it using Chromes dev tools.

Now, does that break anything in IE?

Answer 4

Testing strategy:

1. Go to https://stackoverflow.com/questions
2. Paste var ignoredSelector = '.t-sql'; -- or any tag belonging to the bottom question -- into the JavaScript console.
3. Paste the new function into the JavaScript console:

New function:

if (ignoredSelector.length > 0) {
    var ignoredClass = $("#hideIgnored").is(":checked") ? "tagged-ignored-hidden" : "tagged-ignored";
    var ignoredBlocks = $(ignoredSelector).parents("div.question-summary").addClass(ignoredClass);
    // temporary fix for WebKit prior to v5
    if ($.browser.safari) { // $.browser.webkit returns false for chrome -- latest jQuery into the stack perhaps?
      var container = $('body > .container');
      container.css('zoom', '1.00001');
      setTimeout(function() {
        container.css('zoom', '1');
      }, 0); // allow reflow to work 
    }
}

Answer 5

This appears to be a bug in WebKit of some kind, or a CSS issue so arcane we can't figure it out.

We're using this JavaScript on the /questions page:

if (ignoredSelector.length > 0) {
    var ignoredClass = $("#hideIgnored").is(":checked") ? "tagged-ignored-hidden" : "tagged-ignored";
    $(ignoredSelector).parents("div.question-summary").addClass(ignoredClass);
}

Remember, the user indicated the Hide Ignored Questions preference, so the .tagged-ignored-hidden style is in effect on each question <div>:

.tagged-ignored-hidden
{
    display: none;
}

In IE8, Firefox 3.x, and Opera 10 -- this causes the elements to collapse.. but not in any WebKit based browser.

edit: Chrome 5, which was just released, finally fixes this. Also fixed in Safari 5 which was released today. Bottom line: update your browsers!