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

Assigned To

Authored By

	TheDJ
	Dec 21 2016, 9:51 AM

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)

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

Details

	Subject	Repo	Branch	Lines +/-
	Correct 1px offset error in SVG mask.	mediawiki/extensions/Popups	master	+3 -3
	Position image correctly inside the card	mediawiki/extensions/Popups	master	+1 -1

Customize query in gerrit

Related Objects

Mentioned In: T159187: Minerva img inside a thumbnail has no border, even though thumbinner dimensions always assume so

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 edited projects, added Page-Previews (2016-17-Q2-Goal), Web-Team-Backlog; removed Page-Previews.

ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.

ovasileva moved this task from Backlog to Needs Testing on the Page-Previews (2016-17-Q2-Goal) board.

MBinder_WMF edited projects, added Page-Previews (2016-17-Q3-Goal); removed Page-Previews (2016-17-Q2-Goal).Jan 5 2017, 7:35 PM

MBinder_WMF moved this task from Backlog to Needs Testing on the Page-Previews (2016-17-Q3-Goal) board.Jan 5 2017, 7:45 PM

From the article on "dog"
Hover over "Grey Wolf"
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?

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.

Still a bug.
Can be replicated here by hovering over Cubarific: https://en.wikipedia.beta.wmflabs.org/wiki/Headings

• Nirzar added a comment.Feb 15 2017, 10:08 PM

This comment was removed by • Nirzar.

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

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.Feb 16 2017, 12:01 PM

ovasileva added a project: Reading-Web-Sprint-93-🔍🔍🔍🔍🔍.Feb 16 2017, 12:03 PM

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

@ovasileva that seems to be a known difference between the two browsers indeed: http://stackoverflow.com/questions/13477219/vertical-align-and-inline-block-behaving-annoyingly-different-in-chrome-and-fire

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

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

gerritbot added a project: Patch-For-Review.Feb 16 2017, 8:50 PM

Jdlrobson added projects: Unplanned-Sprint-Work, Reading-Web-Sprint-92-🍜.Feb 16 2017, 9:58 PM

Jdlrobson moved this task from Needs Analysis to Needs Code Review on the Reading-Web-Sprint-92-🍜 board.

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

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-02-21_(1.29.0-wmf.13)).Feb 17 2017, 12:01 AM

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

ovasileva moved this task from Ready for Signoff to Needs More Work on the Reading-Web-Sprint-92-🍜 board.Feb 17 2017, 11:50 AM

ovasileva moved this task from Upcoming to 2016-17 Q3 on the Web-Team-Backlog board.Feb 17 2017, 12:03 PM

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?

• bmansurov moved this task from Needs Analysis to Blocked Externally on the Reading-Web-Sprint-93-🔍🔍🔍🔍🔍 board.Feb 28 2017, 9:28 PM

• bmansurov moved this task from Needs More Work to Blocked Externally on the Reading-Web-Sprint-92-🍜 board.

MBinder_WMF removed a project: Unplanned-Sprint-Work.Mar 1 2017, 7:15 PM

Moving this to todo

ovasileva moved this task from Blocked Externally to To Do on the Reading-Web-Sprint-93-🔍🔍🔍🔍🔍 board.Mar 2 2017, 10:58 AM

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

ovasileva mentioned this in T159187: Minerva img inside a thumbnail has no border, even though thumbinner dimensions always assume so.Mar 2 2017, 3:17 PM

ovasileva moved this task from To Do to Needs Code Review on the Reading-Web-Sprint-93-🔍🔍🔍🔍🔍 board.Mar 2 2017, 6:12 PM

• bmansurov moved this task from Needs Code Review to Needs QA on the Reading-Web-Sprint-93-🔍🔍🔍🔍🔍 board.Mar 2 2017, 11:10 PM

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

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

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-03-07_(1.29.0-wmf.15)).Mar 3 2017, 6:00 PM

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)

Nicholas.tsg moved this task from Needs QA to Ready for Signoff on the Reading-Web-Sprint-93-🔍🔍🔍🔍🔍 board.Mar 6 2017, 12:15 AM

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

ovasileva claimed this task.

	F5654436: Screen Shot 2017-02-16 at 1.06.20 PM.png
	Feb 16 2017, 12:13 PM

	F5654422: Screen Shot 2017-02-16 at 1.04.38 PM.png
	Feb 16 2017, 12:13 PM

	F5661430: pasted_file
	Feb 17 2017, 12:17 AM

	F5661426: pasted_file
	Feb 17 2017, 12:17 AM

Image sticks out underneath the containerClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Description

Testing Criteria

Details

Related Objects

Event Timeline

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