18

Recently, when you hover over a profile picture to get an expanded usercard, the comments move downwards. (If there are no comments, then the "Add a comment" link is the screen element which moves downwards.) This appears to be because of the user details moving from next to the picture to below it instead. Since I don't always keep careful track of where my mouse is, this has caused several jump-scares where elements of the page suddenly shifted without an obvious reason.

Here is a series of pictures to make what I am saying clear. First, the bottom of a question (note this happens for both questions and answers, though, I'm using a question merely for convenience):

question with a uesrcard at the bottom and comment below it

Now, when I hover to expand the usercard, the comments move downwards (see the increase in whitespace between Catija's user information and the first comment):

question with expanded usercard and extra whitespace

I made the expanded usercard see-through by messing with my browser's CSS (just some visibility: hidden), and it appears that the cause is the user information moving around:

question with expanded invisible usercard and extra whitespace; original usercard has information moved below profile picture

(This last picture has the profile picture from the expanded usercard in a different position, as well as other minor shifts in layout - that's from the browser window being smaller in order to fit the console.)

Please restore the original, expected behavior, which is that hovering the usercard produces a popup but doesn't move anything else around; the expanded usercard simply overlays what was already there.

Improve this question
2
  • 3
    This happens because the <div> containing the hover popup is placed immediately after the .user-gravatar{32|48}. Doing so causes the .user-details, which uses float: left, to wrap to below the gravatar. The popup appears to be placed there in order to be in the focus stack for keyboard navigation into the popup. It's viable to have the same focus stack (i.e. same keyboard navigation) if the popup is placed after the <a> which is within the .user-gravatar{32|48} (i.e. as the .user-gravatar{32|48}'s second, and last, child).
    – Makyen
    Nov 9, 2022 at 16:14
  • 3
    Probably the easiest solution to this is to change the selector in the call to StackExchange.helpers.MagicPopup() that's within StackExchange.usermenu.init() from .user-hover .user-gravatar48, .user-hover .user-gravatar32, .js-user-hover-target to .user-hover .user-gravatar48 > a, .user-hover .user-gravatar32 > a, .js-user-hover-target (i.e. use the <a> link instead of the gravatar wrapper as the popup's reference). Additional testing would be needed to confirm that accomplishes all goals. There are, of course, various other alternative solutions, but that seems to be the easiest.
    – Makyen
    Nov 9, 2022 at 16:14

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .