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):

Screen Shot 2016-12-21 at 12.25.16 PM.png (1ร—1 px, 588 KB)

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

Screen Shot 2017-02-15 at 12.11.28 PM.png (324ร—563 px, 231 KB)

@Nirzar - thought on this one?

pasted_file (1ร—1 px, 75 KB)

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)

Screen Shot 2017-02-16 at 1.04.38 PM.png (322ร—510 px, 101 KB)

Cubarific (Chrome 56.0.2924.87)
Screen Shot 2017-02-16 at 1.06.20 PM.png (318ร—507 px, 109 KB)

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 -

pasted_file (502ร—660 px, 48 KB)

card being below the link -

pasted_file (710ร—1 px, 88 KB)

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

T153840 Cube (Chrome).png (383ร—561 px, 94 KB)

T153840 Dog (Chrome).png (309ร—519 px, 142 KB)

and vertical cards

T153840 Dog (Firefox).jpg (423ร—446 px, 67 KB)

T153840 Cube (Firefox).jpg (439ร—374 px, 56 KB)

ovasileva claimed this task.