Thanks for reporting all the bugs @Niedzielski !

Can also be reproduced e.g. on beta especially with zoomed in / narrow screen and reference links more on the right side of the screen. [1]

[1] https://en.wikipedia.beta.wmflabs.org/wiki/Dog

Please note that this issue is most probably unrelated to any of the new code we introduced for Reference Previews, as it can happen on regular page previews as well:

I'm tagging this as a general Page-Previews bug because of this. The big difference is that these misplacements are much more visible on reference previews, just because our hover targets (e.g. [1]) are so small. So yea, we should look into this. This is one of these details that make a product feel unpolished.

One detail I find super fascinating is that the issue never occurs when the popup opens to the bottom:

Really, I can't reproduce it this way around. This might even be an upstream OOjs core bug – or not. We will see.

(Pretty sure that these popups do not use OOUI code.)

TL;DR: See fix in the following patch...

Currently each popup should be positioned in a way so that the arrow of the popup is pointing to the rough position where the mouse entered the link. Every other behavior shows, that there's something not accurate with the calculation of the position. I tested the following ( bug and fix ) with FF v65 & Chrome v72 (Ubuntu) and IE11 (Win7 VM).

• When the popup is shown underneath the link (flippedY == false)[1] this works perfectly fine.
• When the popup is shown above the link (flippedY == true) this also works fine as long as the popup is rendered to the right of the link (flippedX == false).
• In the case that the popup is rendered above the link and left from it (flippedY == true && flippedX == true) we have an offset between the point where we entered the link and the popup.

I can easily fix this when I add an artificial correction to the offset in that case ( there are some other artificial offset corrections in the code already [2]).

Now to RTL wikis:

• Again, everything works fine when the popup is rendered underneath the link.
• When the popup is rendered above the link, the behavior is similar just twisted. So the popups on the 'left' side have an offset and need correction.

[1] https://gerrit.wikimedia.org/g/mediawiki/extensions/Popups/+/182bfafec3b0de42e1137eff08965e9d4e994723/src/ui/renderer.js#354
[2] https://gerrit.wikimedia.org/g/mediawiki/extensions/Popups/+/182bfafec3b0de42e1137eff08965e9d4e994723/src/ui/renderer.js#418

Change 488912 had a related patch set uploaded (by WMDE-Fisch; owner: WMDE-Fisch):
[mediawiki/extensions/Popups@master] Fix left offsets for popups above link

https://gerrit.wikimedia.org/r/488912

Change 489323 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Popups@master] Fix pointer mask for flipped popup

https://gerrit.wikimedia.org/r/489323

Change 488912 abandoned by WMDE-Fisch:
Fix left offsets for popups above link

Reason:
If0ca63d seems to be the better approach - thanks! :-)

https://gerrit.wikimedia.org/r/488912

Change 489323 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Fix pointer mask and CSS offsets for flipped popups

https://gerrit.wikimedia.org/r/489323