Page MenuHomePhabricator

Image sticks out underneath the container
Closed, ResolvedPublic2 Estimated Story Points



Another issue is the summary image inside the Page Previews container being too tall when displayed horizontally (it overflows slightly). For example, a link to demonstrates this issue, showing the image sticking out downwards by a few pixels. This should just be a quick Cascading Style Sheets fix - making the image have a maximum height of the container's height (e.g. max-height: 100%) and ensuring nothing else can overflow or cause scrollbars.

Here is a screenshot (notice the image overlaps the bottom border):

Testing Criteria

Testing steps (across browsers/platforms)

  1. On enwiki, enable hovercards as a beta feature
  2. Hover over cards in the vertical and horizontal orientation
  3. The image must be aligned with the content for both combinations

Event Timeline

TheDJ created this task.Dec 21 2016, 9:51 AM
Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptDec 21 2016, 9:51 AM
bmansurov updated the task description. (Show Details)Dec 21 2016, 5:26 PM
ovasileva triaged this task as High priority.Dec 21 2016, 5:28 PM
ovasileva set the point value for this task to 2.
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
ovasileva moved this task from Backlog to Needs Testing on the Page-Previews (2016-17-Q2-Goal) board.
  1. From the article on "dog"
  2. Hover over "Grey Wolf"
  3. Image sticks out slightly out of container

@Nirzar - thought on this one?

confirmed. previews should have overflow hidden

TheDJ added a comment.Feb 15 2017, 9:29 PM

@Nirzar nope, that's not it. The question is why do you need more height in that block (255 px, to fit something only 250px high) in the first place.

I think I got it. This is inline(-block) content.. What's missing here is vertical-align:middle on the <svg> element. Then you can remove the margin-bottom css rule on the <svg> and you are good.

Still a bug.
Can be replicated here by hovering over Cubarific:

This comment was removed by โ€ข Nirzar.

@TheDJ you maybe right.. i didn't actually inspect it..

@Jdlrobson, @Nirzar - seems to work on Firefox, strangely enough:

Cubarific (Firefox 51.0.1)

Cubarific (Chrome 56.0.2924.87)

Change 338166 had a related patch set uploaded (by TheDJ):
Position image correctly inside the card

I verified this fix locally.
Soon you'll be able to test it by hovering over first link in

Change 338166 merged by jenkins-bot:
Position image correctly inside the card

Thanks for working on this @TheDJ

this is working except 1 case. when the card is a horizontal card and it appears above the link. if the same card appears below the link this issue is not there.

card being above the link -

card being below the link -

same card - try here

TheDJ added a comment.Feb 17 2017, 6:06 AM

Yuck.. I'm not sure yet, but i suspect this is a miscalculation inside the <svg> measurements (a correction on the original problem, like margin-bottom that is now no longer correct).

I was unable to reproduce this on windows 10 with IE11, Edge, Chrome or Firefox. Perhaps OSX/Chrome specific?

@ABorbaWMF it's very hard to notice. I have a retina screen, maybe it's more noticeable that way.

@TheDJ - I notice it as well. Are you planning on tweaking it a bit more for that case or should we take over from here?

Moving this to todo

Change 340738 had a related patch set uploaded (by TheDJ):
[mediawiki/extensions/Popups] Correct 1px offset error in SVG mask.

@ABorbaWMF - added testing criteria

ovasileva updated the task description. (Show Details)Mar 3 2017, 11:22 AM

Change 340738 merged by jenkins-bot:
[mediawiki/extensions/Popups] Correct 1px offset error in SVG mask.

Testing on Chrome and Firefox. This is fixed as images are aligned with content both for horizontal cards

and vertical cards

ovasileva closed this task as Resolved.Mar 6 2017, 10:51 AM
ovasileva claimed this task.