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)

  • 16
    Yup, just don't leave your mouse there and the problem goes away. – jjnguy Aug 19 '09 at 15:11
  • huh. you're right, that fixed it. – DLH Aug 19 '09 at 15:13
  • 11
    But it's broken! It has to be fixed! – Welbog Aug 19 '09 at 15:13
  • 1
    Clearly you've been transported back to an age of BLINK – random Aug 19 '09 at 15:35
  • 5
    Reproduced in Chrome stable, Chrome canary and IE9. – PeeHaa Jan 4 '12 at 16:43
  • Cannot reproduce; has this been corrected? – Goodbye Stack Exchange Jan 8 '12 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 Jan 9 '12 at 0:31
  • Just reproduced now - @random you have to put the mouse on the very tip of the top then it happens.. – Shadow 10 Years Wizard Jan 9 '12 at 8:06
  • Hmm.. click me :-) @Neil - FYA as well. – Shadow 10 Years Wizard Jan 9 '12 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. – Shadow 10 Years Wizard Mar 12 '13 at 13:44
  • @nick Is this fixed in a next revision? Because currently I can still reproduce the same behaviour. – Bart Mar 12 '13 at 13:49
  • @Bart - it was fixed, back in November...looks like a regression here I'll ping Jin on. – Nick Craver Mar 12 '13 at 13:50
  • Reproduced Chrome on XP – Manishearth Jul 3 '13 at 8:28

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.

| improve this answer | |

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.

| improve this answer | |

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

| improve this answer | |

I essentially used Tim's answer.

The flicker will disappear with rev 2013.7.23.882.

| improve this answer | |
  • So if new bug arise we should blame Tim? :-) – Shadow 10 Years Wizard Jul 23 '13 at 12:25
  • 2
    @ShaWizDowArd - Sure. He can fix it too. – Oded Jul 23 '13 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? – Shadow 10 Years Wizard Sep 29 '13 at 14:15

You must log in to answer this question.

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