Flicking "hacker" badge

[crazygolem]

The rotating "hacker" badge behaves unsmoothly when its rotation makes the mouse un-hover it (approach the mouse from the right and hover the badge by only a few pixels): instead of completing its rotation (which would be visually the right thing to do), it flickers back and forth, such that its vertical tangent passes by the mouse's location.

It has been observed on Firefox and Chromium on Linux (with the latter presenting a less ugly effect).

The reason is that the rotation effect on the badge actually changes the perceived (2d, projected) width of the badge, and disables the :hover selector. When that happens, the CSS transition is reverted, the badge rotates back to the point where the mouse hovers it again, which re-enables the :hover selector, and so on and so forth.

Although it can be fixed, there is no way to do it using pure CSS.
For reference: 1 2 3

Should we fix it using JS?