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

The chat is pretty great. But it has an obscure and frustrating phenomenon. When I get pinged, the message gets highlighted, which shoves the icons over to the left a little for some reason.

some reply icons

Since I'll very often want to reply to a message that pings me, I'll move my mouse to that reply icon...

the reply icons have shifted!

... and it just so happens that the amount of time it takes to position my mouse on that small icon is the same amount of time it takes for the highlight to end, so the margins shift over to the right again just when I'm ready to click.

The culprit!

This line of CSS appears to be the troublemaker:

the highlight style is actually given a right margin of 48px precisely

With it disabled, I think the phenomenon would disappear.

aah, much better

(I'm using Firefox 26.)

share|improve this question
    
Yeah, that's... why is that rule there? I don't see any point to it. –  Ilmari Karonen Jan 22 at 12:01
    
All I can imagine is it's vestigial and had a point once upon a time! –  doppelgreener Jan 25 at 12:52

1 Answer 1

After some testing, I still have no idea why the CSS rule causing this effect might have been added in the first place. However, given that removing it seems to have no harmful effects whatsoever, I've gone ahead and done so in Stack Overflow Unofficial Patch v1.4.

Specifically, the custom CSS rule I've added to SOUP is simply:

.message.highlight { margin-right: 0px }

This rule overrides the 48 pixel right margin set in the default SE chat CSS, setting it to zero pixels instead. This fixes the bug reported above, and, as far as I can tell, causes no other issues.


Edit: Turns out that the fix above breaks another CSS rule, which changes the position of the starred message marker depending on whether the message is highlighted or not. To fix this issue, I've added the following extra CSS rule to SOUP v1.6.1:

.message.highlight .flash { right: -38px }

(The -38px value is what the position of the marker is normally set to for non-highlighted messages.)

share|improve this answer

You must log in to answer this question.

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