Page Preview prevents you from clicking link in certain situations
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

I've noticed that often times page previews appear directly beneath your cursor preventing you from being able to click the link you are hovering over. It would be nicer if the page preview was offset a few pixels from your cursor so you could still click the link after getting the page preview, or alternately make the entire page preview clickable (including the footer and pokey).

Steps To Reproduce

Navigate to a page, e.g. https://en.wikipedia.org/wiki/Tim_Berners-Lee.
Dwell on a link at least half way down the page so that the preview is above the link.
Observe that the preview's pokey ends up underneath the mouse cursor and isn't clickable.

Expected

The pokey should never overlap the link

Solution

See T161366#3189674.

Details

	Subject	Repo	Branch	Lines +/-
	Don't occlude link when preview is above mouse	mediawiki/extensions/Popups	master	+7 -3

Customize query in gerrit

Event Timeline

kaldari created this task.Mar 25 2017, 3:28 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 25 2017, 3:28 AM

@kaldari can you please provide a link where this is happening? Also, what browser are you using.

• bmansurov moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Mar 29 2017, 7:45 PM

This seems to be fixed now.

OK, just ran into this problem again. If you go to the article Tim Berners-Lee and hover over the upper half of the link "LCD" (on a small monitor/window so that the page preview appears above the link rather than below), the page preview will pop-up under your cursor and you won't be able to follow the link. The bug is basically that the footer part of the pop-up isn't clickable (while the rest of it is).

Thanks for the write-up @kaldari. I've condensed it and added it to the description.

kaldari updated the task description. (Show Details)Apr 8 2017, 1:19 AM

kaldari updated the task description. (Show Details)

We talked about this and it seems the correct solution to this is for the pokey to not overlap the link by moving it up/down a few pixels. So it would appear above or below the link @Nirzar any reason not to do this?

^ I think that was the right thing to do…

@Nirzar any reason not to do this?

Seems like a bug to me. the "pokey" should not overlap the hyperlink.

Jdlrobson removed • Nirzar as the assignee of this task.Apr 11 2017, 8:24 PM

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Prioritization to Upcoming on the Web-Team-Backlog board.

The issue here is in the createLayout function in src/renderer.js:

src/renderer.js

// Change the Y position to the top of the link
if ( event.pageY ) {
	// Since client rectangles are relative to the viewport,
	// take scroll position into account.
	offsetTop = getClosestYPosition(
		event.pageY - $window.scrollTop(),
		link.get( 0 ).getClientRects(),
		true
	) + $window.scrollTop();
}

We're not subtracting the size of the pokey from offsetTop in this situation – we are in the case where the event isn't a mouse event (event.pageY is undefined).

offsetTop = getClosestYPosition( /* ... */ ) + $window.scrollTop() - SIZES.pokeySize;

should suffice.

phuedx renamed this task from Page Preview prevents you from clicking link to Page Preview prevents you from clicking link in certain situations.Apr 18 2017, 1:20 PM

phuedx updated the task description. (Show Details)

We might want to consider this in next sprint. More we can wrap up the better.

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 18 2017, 8:51 PM

MBinder_WMF set the point value for this task to 1.Apr 19 2017, 5:38 PM

Jdlrobson moved this task from Needs Analysis to To Do on the Reading-Web-Sprint-96 board.Apr 19 2017, 5:40 PM

phuedx claimed this task.Apr 20 2017, 3:07 PM

phuedx moved this task from To Do to Doing on the Reading-Web-Sprint-96 board.

Change 349231 had a related patch set uploaded (by Phuedx):
[mediawiki/extensions/Popups@master] Don't occlude link when preview is above mouse

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

gerritbot added a project: Patch-For-Review.Apr 20 2017, 3:42 PM

phuedx moved this task from Doing to Needs Code Review on the Reading-Web-Sprint-96 board.Apr 20 2017, 3:43 PM

Jdlrobson removed a project: Patch-For-Review.Apr 20 2017, 4:24 PM

Change 349231 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Don't occlude link when preview is above mouse

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

I hope this is clear!
Let me know if you need better reproduction instructions!

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-04-25_(1.29.0-wmf.21)).Apr 20 2017, 5:00 PM

phuedx updated the task description. (Show Details)Apr 20 2017, 5:18 PM

kaldari updated the task description. (Show Details)Apr 20 2017, 5:53 PM

Macro seal-of-approval: No more getting poked by the pokey!

^ It's yuuuuge!

phuedx removed a project: patch-welcome.Apr 20 2017, 6:15 PM

Tested on the beta cluster on a variety of systems and browser. Appears to be working properly.

EddieGP moved this task from Backlog to Doing on the good first task board.Apr 20 2017, 10:40 PM

phuedx reassigned this task from ABorbaWMF to Jdlrobson.Apr 21 2017, 9:42 AM

phuedx added a subscriber: ABorbaWMF.

I guess this is for me to sign off!

MBinder_WMF moved this task from Upcoming to 2016-17 Q4 on the Web-Team-Backlog board.Oct 10 2017, 7:33 PM

Page Preview prevents you from clicking link in certain situationsClosed, ResolvedPublic1 Estimated Story PointsActions