Page MenuHomePhabricator

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

Description

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.

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

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 4 2019, 7:46 PM
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.
WMDE-Fisch moved this task from Sprint Backlog to Doing on the WMDE-QWERTY-Sprint-2019-02-06 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]

[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 bug – or not. We will see.

matmarex removed a project: OOjs.Feb 6 2019, 6:08 PM
matmarex added a subscriber: matmarex.

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

matmarex removed a subscriber: matmarex.Feb 6 2019, 6:08 PM

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

Lea_WMDE closed this task as Resolved.Feb 20 2019, 9:03 AM
Lea_WMDE moved this task from Demo to Done on the WMDE-QWERTY-Sprint-2019-02-06 board.