User card senses danger when chasing tricky "edit tags", runs for dear life

Question

A few very weird things are going on.

First I noticed on this question that when I hovered over the tags, "edit tags" appeared on the next line, and so was unclickable:

As I was reporting that I found it was already reported here, at least for long tag names. But then on that question I noticed the same thing happened for even short tags. Then, this happened:

As you can see, after a while, the wily user card, fearing for its life, quickly makes its escape from the window.

I can consistently make this happen but I'm not entirely sure how. I believe it's related to the "edit tags" thing (which is an issue in itself) I noticed I also need to move the mouse at least once towards the "edit tags" link. Then, it's when moving the mouse between tags that the user card starts to move.

I can consistently make this happen by moving the mouse back and forth between a tag and an attempt at "edit tags". After some number of times, the user card starts moving. This also happens on posts with a single tag.

(And actually, looking at my first gif above, I'm also realizing the user card thing happened there, too, which I didn't notice when I first recorded that.)

The behavior depends on the browser:

• Chrome 58 (Windows): The above happens.
• Opera 43: The above happens.
• Firefox 53 (Windows): The "edit tags" is on the next line but the user card does not move.
• IE 6, IE 11, Edge (Windows): "Edit tags" is in its correct place on the right and there are no issues.

Answer 1

First: awesome title. I hope you file as many bugs as possible.

This is a subtle bug we missed in testing. In order to pin the footer to the bottom in most modern browsers, we added the following styles earlier today:

html {
  height: 100%;
}
body {
  min-height: 100%;
  .flexbox();
  .flex-flow(column nowrap);
}
.container {  
  width: 100%;
  .flex();
}

That went pretty well overall, but it turns out the flexbox has a quirky interaction with jQuery. Here's the JavaScript for the hover (mouseover so it works on the parent):

jLinkWrapper
  .mouseover(function () { jEditTagsLink.show(); })
   .mouseout(function () { jEditTagsLink.hide(); });

For some reason, jQuery changed from .show() making than <span> (which contains "edit tags") from display: inline; to display: block with the flexbox styling applied.

I'm not exactly sure why this happens (anyone know?) but a quick fix is rolling out now. Instead of .show(), it's explicitly .css('display', 'inline') now.

This fix will hit all sites in the next few minutes.