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.


Windows Vista, Google Chrome 2 or Safari 4

Screenshot Screenshot of problem (as of 3 July 2009)


Uservoice reference

  • I'm in Chrome on WinXP and looks as it should to me.
    – Eric
    Commented Jul 3, 2009 at 2:13
  • I can verify this doesn't show up in Chrome 5 under Linux.
    – ScottKoon
    Commented Mar 31, 2010 at 6:54

5 Answers 5


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.

  • fascinating, this does work on Safari/win but does nothing for Chrome. You Mac users.. Commented Mar 31, 2010 at 6:31
  • I can't duplicate the bug on Mac Chrome. I guess the lesson is that all Webkit can vary per implementation. Commented Mar 31, 2010 at 6:44
  • @nathan probably because Mac Chrome is at version 5.x (beta)? Check the versions. Commented Mar 31, 2010 at 6:50
  • The questions div seems to resize properly when hiding a question-summary div.
    – ScottKoon
    Commented Mar 31, 2010 at 7:37

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.

  • agree, this is not a bug, they've just hidden elements on the page. Commented Jul 3, 2009 at 2:40
  • 3
    Why would the hidden elements still take up space though? doesn't display: none traditionally remove the items from taking up space? Commented Jul 3, 2009 at 3:39
  • I haven't really looked at the code, but it's probably in a containing div. A div's hight is calculated at render time, and won't change regardless of whether or not content is changed. You'd need another javascript function to recalculate the hight and change it. Commented Jul 3, 2009 at 3:47
  • 1
    oh, I see. it's specific to a) those pages b) webkit c) people who have "hide ignored" on. That's extremely narrow. Commented Jul 3, 2009 at 3:53
  • 1
    lies.. . Commented Jul 3, 2009 at 3:56
  • Why wouldn't it be a bug? Firefox doesn't do this.
    – jasonh
    Commented Jul 21, 2009 at 23:57
  • It's browser dependent, not a bug on the site but rather an oversight in the webkit engine. Commented Jul 22, 2009 at 0:15
  • Whatever, its annoying
    – rdkleine
    Commented Sep 16, 2009 at 19:20
  • 1
    @Jeff Atwood: Your analytics stats indicate 16% of users use a webkit browser.. I can't find stats on Ignored tags in the data dump, but one can assume the active community are also the people using Highlight/Ignore, which could still mean a significant amount of people are affected..
    – Tim
    Commented Oct 22, 2009 at 11:14
  • 1
    If the ignore filtering were done on the server (as I feel it should be) we wouldn't be talking about browser display bugs here. Commented Nov 14, 2009 at 20:30
  • Carl: Right, but then if the user wants to show ignored tags from the page it's a round trip back to get the questions.
    – ScottKoon
    Commented Mar 31, 2010 at 7:46
  • @ian even setting the div height via jQuery at runtime does not fix this in Chrome 4. Commented Mar 31, 2010 at 7:48

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?

  • This was under Win7 Chrome 4.1
    – ScottKoon
    Commented Mar 31, 2010 at 7:39
  • good idea, but in CSS, doesn't work.. it's known that zooming in and out in the UI "fixes" it, but that's not CSS.. Commented Mar 31, 2010 at 7:47
  • .container{margin:0 auto;text-align:left;width:960px;zoom:1;} Try nuking the "zoom:1" property.
    – ScottKoon
    Commented Mar 31, 2010 at 7:53
  • doesn't work. verified. Commented Mar 31, 2010 at 8:33

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 
  • actually, false alarm.. testing error on my end. Doesn't work in Chrome v4 :( Commented Mar 31, 2010 at 9:45
  • Ah I tested in safari; hunting for a chrome v4 installer.
    – wombleton
    Commented Mar 31, 2010 at 10:07
  • credit to @scott for pointing this method which works in safari and chrome 4
    – wombleton
    Commented Mar 31, 2010 at 10:48
  • Where is this code located, I must have missed it? Try replacing the zoom changes with container.css('display', 'none'); container.css('display', 'block'); Worked for me via the console.
    – user145498
    Commented Mar 31, 2010 at 11:32
  • Code modified from @Jeff's answer. Whilst changing the display will work (pretty sure all this is doing is forcing a recalculate) modifying the zoom by 0.001% or whatever should be less noticeable.
    – wombleton
    Commented Mar 31, 2010 at 21:10
  • doesn't work -- confirmed. Appreciate the effort, though. Commented Apr 1, 2010 at 6:16
  • was two problems with it: test was for webkit not safari and no timeout on the second zoom
    – wombleton
    Commented Apr 1, 2010 at 20:52

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";

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

    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!

  • FWIW it works fine in my Chrome 5.
    – balpha StaffMod
    Commented Mar 31, 2010 at 5:59
  • we can repro it 100% of the time in Chrome (latest released ver) and Safari/win 4.0.4 -- we can also confirm it does NOT happen (eg it is fixed) in Chrome 5 / mac Commented Mar 31, 2010 at 6:09
  • One good thing that came out of this - I discovered my version of Chrome is out of date!
    – hemp
    Commented Mar 31, 2010 at 6:48
  • Definitely not seeing this on Win7/Chrome
    – user145498
    Commented Mar 31, 2010 at 7:00
  • @mok multiple people on our team repro'ed it.. make sure you're following the steps, above Commented Mar 31, 2010 at 7:08
  • Well if it works in Opera, then there is no problem here.
    – random
    Commented Mar 31, 2010 at 7:30
  • I have, to the letter (do I need to add a tag to the ignore tags field?) for both Chrome and Safari on Win 7. I'll try again, disabling all extensions.
    – user145498
    Commented Mar 31, 2010 at 7:31
  • The repro steps are missing a detail. I had to add a tag to be ignored. Alternatively, you can also open the JS console and type "$("#question-summary-{id}").hide()" (where {id} is an actual question id) and repro the bug.
    – ScottKoon
    Commented Mar 31, 2010 at 7:32
  • Thanks Scott, adding a tag worked
    – user145498
    Commented Mar 31, 2010 at 7:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .