Page MenuHomePhabricator

Page previews horizontal gradient overlaps previous line
Closed, ResolvedPublic2 Estimate Story Points

Description

The horizontal gradient on page previews is taller than text height and overlaps with previous line:

https://snag.gy/v3Tf8z.jpg
Note how the bottom of the g is clipped.

Acceptance Criteria:

  • Change gradient height to match text height (using responsive "em"/"rem" units to stop the problem happening again).

Steps to reproduce:

  1. As a logged-in user, go to https://en.wikipedia.org/wiki/Roman_Empire
  2. Hover over Marc Anthony
  3. You will notice the "p" of the second to last line is cut off

Testing criteria:

  1. Go to https://en.wikipedia.beta.wmflabs.org/wiki/Colocolo and hover over "Animalia" in the infobox

Expected behavior - preview should not blue any of the text in the right side of the line "Animals are motile, meaning they"
Compare to preview of "Animalia" https://en.wikipedia.org/wiki/Colocolo where last letter of the word "they" is noticeably cut off

Details

Related Gerrit Patches:
mediawiki/extensions/Popups : masterReduce height of horizontal gradient

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 21 2017, 11:27 AM
ovasileva triaged this task as High priority.May 21 2017, 11:27 AM
ovasileva moved this task from Incoming to Upcoming on the Readers-Web-Backlog board.
Jdlrobson updated the task description. (Show Details)May 23 2017, 4:42 PM

Further clarification:

ovasileva updated the task description. (Show Details)May 23 2017, 4:45 PM
ovasileva set the point value for this task to 2.

More important details from MediaWiki original issue report:
I recently spotted a visual problem with the horizontal gradient (which is used to show the article content continues) at the end of the article description text: its large height causes it to cover part of the previous line.

After checking the HTML code, I found the problem. The text line height is set to 20px and the gradient pseudo-element has the height 24px. The pseudo-element should be the height of a line of text (20px here). To prevent the issue happening again if the text font size changes, the height should be set to "1em".

Please fix this minor issue - an image showing my screenshots of the problem [shown below] is available at "Problem demo image shown below" and any article with a tall letter such as "g" on the end of the second last line of the Page Previews/Hovercards text should cause this problem.

Edwardj_123 renamed this task from Page previews horizontal gradient overlaps text to Page previews horizontal gradient overlaps previous line.May 25 2017, 7:27 PM
Edwardj_123 updated the task description. (Show Details)
Edwardj_123 updated the task description. (Show Details)May 25 2017, 7:30 PM

Using rems is pretty safe given popups is JS only (ie10+) and it is supported in ie9+ (when not used in font, use it in font-size instead).

Change 356464 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/Popups@master] Reduce height of horizontal gradient

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

Change 356464 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Reduce height of horizontal gradient

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

bmansurov removed bmansurov as the assignee of this task.Jun 2 2017, 2:06 PM
bmansurov added a subscriber: bmansurov.
phuedx assigned this task to ABorbaWMF.Jun 6 2017, 9:42 AM
phuedx added a subscriber: phuedx.Jun 6 2017, 9:46 AM

@ABorbaWMF: @bmansurov's change should've been deployed to the Beta Cluster. You'll need to find some articles with long previews so you see spot the gradient.

@ABorbaWMF - adding test articles to task description

ovasileva updated the task description. (Show Details)Jun 6 2017, 3:26 PM

Looks good on Beta. Tried the example article. Also, the 'fox' link on the Dog article works well.


ovasileva closed this task as Resolved.Jun 9 2017, 10:46 AM

looks good. side note: good example of inappropriate bolding on the fox article