Tag popup disappears when trying to mouse over it

Question

I don't try to click tag popups too often, so I have no idea how long this has been going on, but I recently observed some rather annoying behavior while trying to favorite a tag on a beta site. Since an animation speaks more than 2¹⁰ words (or something like that), let me include a screencast:

It appears that sometimes there's some kind of a narrow gap between the tag link and the popup, and if the mouse cursor happens to hit that gap while moving the mouse over the popup, the popup disappears. Moving the mouse fast enough sometimes allows the cursor to skip the gap.

This doesn't happen with all tags on a page: in the animation above, the tags on the topmost post work fine, while those on the second-topmost one are buggy. As far as I can tell, if the bug affects one of the tags on a given post, it affects all of them. Scrolling the page appears not to have any effect on the behavior (unless I scroll the tag so close to the bottom of the window that the popup opens above the tag instead).

Curiously, while the working popup in the animation does have a visible one-pixel gap above it, the broken one doesn't. In general, I have not noticed a strong correlation between this bug and the visible positioning of the popup relative to the tag, even if I'd logically expect one.

The behavior also seems to be both browser- and site-dependent: I've observed it on Firefox 29.0 on Kubuntu Linux; it does not seem to happen with Chromium 34.0 on the same platform. As for sites this happens on, I've been able to reproduce this bug on:

• all SE beta sites I've tested (e.g. crypto.SE, codegolf.SE and anime.SE),
• meta.SE (which the animation above is from), and
• rpg.SE.

Typically, on sites where this happens, about half the posts on the front page are affected.

I have not been able to reproduce this on SO, SU, SF, MO, StackApps, gaming.SE, academia.SE, ubuntu.SE, electronics.SE, math.SE, english.SE, webmasters.SE, workplace.SE, skeptics.SE, cooking.SE, scifi.SE, physics.SE, graphicsdesign.SE or tex.SE.

Given that I first noticed this on a beta site, it's not really a surprise that it happens on all of them, and on MSE, which shares essentially the same tag styling. The appearance on rpg.SE surprised me, just as I was ready to conclude that this issue was only restricted to beta sites and MSE. I have so far not found any other affected sites, although there might be some.

---

Edit: I took a look at the code, and it seems that the tag popups are implemented using StackExchange.helpers.MagicPopup(), which features a hardcoded 5 ms (yes, that's 1/200 of a second) time span during which the mouse cursor must move from the tag link to the popup in order to avoid it closing. Whatever the root cause of this issue is, I suspect that simply increasing the delay to, say 100 ms (= 1/10 of a second) would effectively make it disappear.

Answer 1

Fixed in the next build.

The 5ms delay has nothing to do with this; that's just there because when moving the cursor from the popup to the tag, you'll get a mouseout event from the popup and (immediately following) a mousein event from the tag, even if there's no gap. A 0-ms delay (i.e. a nextTick if you will) should be enough here; I just like to give myself a few extra ms for things where you rely on the browser's implementation of event delivery.

But there shouldn't be a gap in the first place; the reason it was (sometimes) there came from the browser's handling of fractional pixels, which is always a fun source of cross-browser weirdness. This also explains the inconsistency you observed between the gap being visible and the gap being there (as in: the popup disappears). When you position something at a y-coordinate of 521.1549274 pixels, you're at the mercy of all kinds of interesting rounding behavior in the browser.

From the next build on, when we measure where exactly the tag menu should appear below the tag, we round this coordinate down to the next integer.