26

If I go to the Questions page and hold the mouse over the top edge of one of the tabs (other than the one currently displayed) the tab will flicker wildly.

flickering tabs

This happens in all major browsers. (IE, Firefox, Chrome latest versions)

13
  • 16
    Yup, just don't leave your mouse there and the problem goes away.
    – jjnguy
    Commented Aug 19, 2009 at 15:11
  • huh. you're right, that fixed it.
    – DLH
    Commented Aug 19, 2009 at 15:13
  • 11
    But it's broken! It has to be fixed!
    – Welbog
    Commented Aug 19, 2009 at 15:13
  • 1
    Clearly you've been transported back to an age of BLINK
    – random
    Commented Aug 19, 2009 at 15:35
  • 5
    Reproduced in Chrome stable, Chrome canary and IE9.
    – PeeHaa
    Commented Jan 4, 2012 at 16:43
  • Cannot reproduce; has this been corrected? Commented Jan 8, 2012 at 18:36
  • No, this still happens for me. I've never noticed before but seeing the question I tried and sure enough it flickers. (Firefox 9)
    – animuson StaffMod
    Commented Jan 9, 2012 at 0:31
  • Just reproduced now - @random you have to put the mouse on the very tip of the top then it happens.. Commented Jan 9, 2012 at 8:06
  • Hmm.. click me :-) @Neil - FYA as well. Commented Jan 9, 2012 at 8:17
  • @Nick nope, sorry to ruin the mood but nothing was fixed I still see the exact same behavior. If you want can record new vid showing it. Commented Mar 12, 2013 at 13:44
  • @nick Is this fixed in a next revision? Because currently I can still reproduce the same behaviour.
    – Bart
    Commented Mar 12, 2013 at 13:49
  • @Bart - it was fixed, back in November...looks like a regression here I'll ping Jin on. Commented Mar 12, 2013 at 13:50
  • Reproduced Chrome on XP Commented Jul 3, 2013 at 8:28

4 Answers 4

13
+100

When hovering, the tab shifts down one pixel, causing it to move out from under the mouse. This returns it to its normal state, which causes the tab to go back up, causing the hover to reoccur, ad infinitum.

Tweaking the CSS seems to give the same effect without shifting the box, which prevents the flickering. More specifically, the line-height and margin-top should be removed from #tabs a:hover, and #tabs a should be modified as follows:

#tabs a {
    background: inherit;
    border: 1px solid transparent; /* transparent instead of white     */
    /* ... */
    line-height: 20px;             /* keep the tabs where they are now */
    margin: 9px 8px 0 0;           /* always apply the 9px top margin  */
    /* ... */
    border-bottom: 1px solid #777; /* don't overlap when not hovering  */
}

This addresses the issue in Chrome 17, Firefox 9, Opera 11.6, and IE 9 (as well as IE 9's IE 8 mode) without altering how the tabs are currently presented. It's possible that this causes some other conflict I'm unaware of that explains why this is the way it is, but I can't see anything obvious.

4

I can confirm that something similar happens when you move the cursor along the border of the tabs, at least in Chrome (the only browser that matters (hurrrrr)).

I don't know what browser the OP is using but I can't make it flicker without moving the mouse constantly.

4

It happens every time I hover over something that changes size in Firefox.

4

I essentially used Tim's answer.

The flicker will disappear with rev 2013.7.23.882.

3
  • So if new bug arise we should blame Tim? :-) Commented Jul 23, 2013 at 12:25
  • 2
    @ShaWizDowArd - Sure. He can fix it too.
    – Oded
    Commented Jul 23, 2013 at 12:26
  • Oded, care to take a look here? I found same bug as this one, see this - not sure it will also fix the bug reported today but can you apply that CSS on those buttons too? Commented Sep 29, 2013 at 14:15

You must log in to answer this question.

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