Page MenuHomePhabricator

Page previews horizontal gradient overlaps previous line
Closed, ResolvedPublic2 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