Page MenuHomePhabricator

[Bug] Pointer is incorrectly aligned for some references
Closed, ResolvedPublic5 Estimated Story Points


Steps to reproduce (case a)

  1. Visit http://localhost:8181/wiki/Barack_Obama on the Vector desktop site with reference previews enabled.
  2. Hover over reference "[3]"

Steps to reproduce (case b)

  1. Visit http://localhost:8181/wiki/Middle_English on the Vector desktop site with reference previews enabled.
  2. Hover over reference "[4]"

Expected results

  • The popup pointer touches the link hovered over.

Actual results

  • The popup pointer is sometimes misaligned, making it difficult to interact with the dialog without triggering a nearby link.

localhost_8181_wiki_Barack_Obama.png (1×1 px, 717 KB)

localhost_8181_wiki_Middle_English.png (1×1 px, 496 KB)

Environments observed

  • Browser version: Chromium v71.0.3578.98
  • OS version: Ubuntu v18.10
  • Device model: Desktop
  • Device language: English
  • Git commit: fb56a2e

Event Timeline

WMDE-Fisch set the point value for this task to 5.
WMDE-Fisch moved this task from Ready for pickup to Doing on the Reference Previews board.

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]

Screenshot from 2019-02-06 18-26-57.png (802×1 px, 284 KB)


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:

Screenshot from 2019-02-06 18-49-25.png (242×409 px, 53 KB)

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:

Screenshot from 2019-02-06 18-49-33.png (244×392 px, 44 KB)

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

matmarex added a subscriber: matmarex.

(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.


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

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

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

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

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

Lea_WMDE moved this task from Demo to Done on the WMDE-QWERTY-Sprint-2019-02-06 board.