Page MenuHomePhabricator

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

Description

Description

https://www.mediawiki.org/w/index.php?title=Topic:Tgxjw14e2iuees2o&topic_showPostId=th4t3onuejqwb73x#flow-post-th4t3onuejqwb73x

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 https://en.wikipedia.org/wiki/Cube 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

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptDec 21 2016, 9:51 AM
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

@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.

@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

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

I verified this fix locally.
Soon you'll be able to test it by hovering over first link in https://en.wikipedia.beta.wmflabs.org/wiki/Headings

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

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

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 https://en.wikipedia.beta.wmflabs.org/wiki/Bear

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?

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

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

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

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

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

and vertical cards

ovasileva claimed this task.