What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

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 Screenshot of problem (as of 3 July 2009)

References

Uservoice reference

share|improve this question
    
I'm in Chrome 2.0.172.33 on WinXP and looks as it should to me. –  Eric Jul 3 '09 at 2:13
    
I can verify this doesn't show up in Chrome 5 under Linux. –  ScottKoon Mar 31 '10 at 6:54

5 Answers 5

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.

share|improve this answer
    
agree, this is not a bug, they've just hidden elements on the page. –  Jeff Atwood Jul 3 '09 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? –  Paul Alexander Jul 3 '09 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. –  Ian Elliott Jul 3 '09 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. –  Jeff Atwood Jul 3 '09 at 3:53
1  
lies.. . –  Ian Elliott Jul 3 '09 at 3:56
    
Why wouldn't it be a bug? Firefox doesn't do this. –  jasonh Jul 21 '09 at 23:57
    
It's browser dependent, not a bug on the site but rather an oversight in the webkit engine. –  Ian Elliott Jul 22 '09 at 0:15
    
Whatever, its annoying –  rdkleine Sep 16 '09 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 Oct 22 '09 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. –  Carl Smotricz Nov 14 '09 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 Mar 31 '10 at 7:46
    
@ian even setting the div height via jQuery at runtime does not fix this in Chrome 4. –  Jeff Atwood Mar 31 '10 at 7:48

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.

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

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?

share|improve this answer
    
This was under Win7 Chrome 4.1 –  ScottKoon Mar 31 '10 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.. –  Jeff Atwood Mar 31 '10 at 7:47
    
.container{margin:0 auto;text-align:left;width:960px;zoom:1;} Try nuking the "zoom:1" property. –  ScottKoon Mar 31 '10 at 7:53
    
doesn't work. verified. –  Jeff Atwood Mar 31 '10 at 8:33

Testing strategy:

  1. Go to http://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 
    }
}
share|improve this answer
    
actually, false alarm.. testing error on my end. Doesn't work in Chrome v4 :( –  Jeff Atwood Mar 31 '10 at 9:45
    
Ah I tested in safari; hunting for a chrome v4 installer. –  wombleton Mar 31 '10 at 10:07
    
credit to @scott for pointing this method which works in safari and chrome 4 –  wombleton Mar 31 '10 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 Mar 31 '10 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 Mar 31 '10 at 21:10
    
doesn't work -- confirmed. Appreciate the effort, though. –  Jeff Atwood Apr 1 '10 at 6:16
    
was two problems with it: test was for webkit not safari and no timeout on the second zoom –  wombleton Apr 1 '10 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";
    $(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!

share|improve this answer
    
FWIW it works fine in my Chrome 5. –  balpha Mar 31 '10 at 5:59
    
we can repro it 100% of the time in Chrome 4.1.249.1042 (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 –  Jeff Atwood Mar 31 '10 at 6:09
    
One good thing that came out of this - I discovered my version of Chrome is out of date! –  hemp Mar 31 '10 at 6:48
    
Definitely not seeing this on Win7/Chrome 4.1.249.1042 –  user145498 Mar 31 '10 at 7:00
    
@mok multiple people on our team repro'ed it.. make sure you're following the steps, above –  Jeff Atwood Mar 31 '10 at 7:08
    
Well if it works in Opera, then there is no problem here. –  random Mar 31 '10 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 Mar 31 '10 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 Mar 31 '10 at 7:32
    
Thanks Scott, adding a tag worked –  user145498 Mar 31 '10 at 7:43

You must log in to answer this question.

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