Page MenuHomePhabricator

Hovercard images overlapping text/card edge in Internet Explorer
Closed, ResolvedPublic3 Estimated Story Points

Description

Some images are overlapping the hovercard text, and some busting out of the card altogether. I saw this problem in Internet Explorer 9, 10 and 11 using crossbrowsertesting.com. Edge doesn't appear to be affected.

IE11-a.png (1ร—1 px, 556 KB)

IE11-b.png (1ร—1 px, 515 KB)

QA

IE9, 10, 11 and Chrome

  1. Visit http://reading-web-staging.wmflabs.org/wiki/Special:AllPages
  2. Check the hovercards for different articles, like "Donald Trump", "With image" and "With tall image"
  3. Verify the thumbnail images are properly contained in the hovercard and don't spill out of it.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson triaged this task as Medium priority.Jul 4 2016, 5:13 PM

I tested this same page on IE 9 and 10 using Browserstack, and an actual copy of IE 11 which I have installed. According to the screencaps below there appears no longer to be any hovering/overlapping issues between the text and image gallery.

IE 9

T139297 IE 9.jpg (784ร—1 px, 389 KB)

IE 10

T139297 IE 10.jpg (803ร—1 px, 394 KB)

IE 11

T139297 IE 11.jpg (898ร—1 px, 402 KB)

ovasileva claimed this task.

Change 341365 had a related patch set uploaded (by phuedx):
[mediawiki/extensions/Popups] renderer: Ensure images don't overflow container

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

Change 341366 had a related patch set uploaded (by phuedx):
[mediawiki/extensions/Popups] renderer: Ensure settings cog visible in IE9-11

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

bmansurov added a subscriber: bmansurov.

@phuedx feel free to remove the newly added tags if you're not planning on working on the task.

@bmansurov: There's overlap between this task and the two bugs that @ABorbaWMF spotted while QA'ing T156800. I think it's best to have them both in the current sprint. Thanks!

ovasileva raised the priority of this task from Medium to High.Mar 7 2017, 6:03 PM
ovasileva set the point value for this task to 3.Mar 7 2017, 6:08 PM

A not-so-clear issue is that the settings cog is occluded by the image.

Tested on IE11 / Win 7 - settings cog appears as expected:

Screen Shot 2017-03-07 at 7.41.59 PM.png (390ร—532 px, 300 KB)

Tested on IE11 / Win 7 - settings cog appears as expected:

Not quite. Notice how the text, the truncating (pseudo-) element, and the settings cog are close to the left edge of the image. Compare your IE11 on Windows 7 screenshot with this one from Chrome (56.0.2924.87) on macOS Sierra (10.12.3):

Chrome (56.0.2924.87).png (268ร—471 px, 128 KB)

My bad. Didn't realise https://gerrit.wikimedia.org/r/#/c/341327/2 was a dependency. That patch has a question which should be easily answered so we can get this all merged.

I'd note that I don't see the issue in F4235260 on enwiki.

IE11-a.png (1ร—1 px, 556 KB)

Change 341365 merged by jenkins-bot:
[mediawiki/extensions/Popups] renderer: Ensure images don't overflow container

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

Change 341366 merged by jenkins-bot:
[mediawiki/extensions/Popups] renderer: Ensure settings cog visible in IE9-11

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

QA

IE9, 10, 11 and Chrome

  1. Visit http://reading-web-staging.wmflabs.org/wiki/Special:AllPages
  2. Check the hovercards for different articles, like "Donald Trump", "With image" and "With tall image"
  3. Verify the thumbnail images are properly contained in the hovercard and don't spill out of it.

@Jhernandez Is this stuff currently running on staging? I am seeing issues with on the page noted above on Windows 10 IE11.

pasted_file (736ร—1 px, 275 KB)

@ABorbaWMF: You may sometimes have to append ?debug=true to the URL to give the staging server a helpful nudge. Having done that, I see the following in IE11 on Windows 10:

Windows 10 - IE11.png (848ร—694 px, 303 KB)

This appears to be working correctly now.

Target site - http://reading-web-staging.wmflabs.org/wiki/Special:AllPages
Systems/Browsers:
Windows 10 - IE11
Windows 8.1 - IE11
Windows 8 - IE10
Windows 7 x64 - IE9 x64
Windows 10 - Edge
Windows 10 - Chrome 56

I would like to test on the Beta site as well when it is more stable. I am still seeing some problems there. Here is an image from https://en.wikipedia.beta.wmflabs.org/wiki/Dog hovering over Carnivora.

pasted_file (736ร—1 px, 476 KB)

Looks good on staging, so signing off. @phuedx - when can we expect the changes to be on the beta cluster?

Change 343274 had a related patch set uploaded (by Phuedx):
[mediawiki/extensions/Popups] renderer: Really ensure images don't overflow

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

Reopening this per T139297#3089714.

I've added a test page for it on the staging server, which you can use (amongst other pages) to test rEPOPf6db973fb96d: renderer: Really ensure images don't overflow.

I suppose the text "With tall image." should show a preview with an image? It's not showing an image and the API is also not returning an image.

I've touched the "With tall image" page and now see an image in the preview.

Change 343274 merged by jenkins-bot:
[mediawiki/extensions/Popups] renderer: Really ensure images don't overflow

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

I have tested hovercards on T158631 a few minutes ago so I will reshare the relevant hovercard captures -
Windows 8.1 - IE11

Windows 8.1 Part 1 IE11.png (1ร—2 px, 643 KB)
Windows 10 - IE11
Windows 10 Part 1 IE11.png (768ร—1 px, 489 KB)
Windows 10 - Edge
Windows 10 Part 1 Edge.png (768ร—1 px, 370 KB)
Windows 10 - Chrome 57
Windows 10 Part 1 Chrome 57.png (768ร—1 px, 494 KB)

and here are two additional ones I checked via cloud-based cross-browser testing -
Windows 8 - IE10
Windows 8 - IE10.png (1ร—2 px, 598 KB)

Windows 7 x64 - IE9 x64
Windows 7 x64 - IE9 x64.png (1ร—2 px, 686 KB)

@ABorbaWMF already knows this, but it might be noticeable that right now I can only get the hovercards to appear on the Beta site. Anthony is keeping me posted about the testing of other sections later.

@Nicholas.tsg This looks good. I took a quick look as well and all seems to be working.

phuedx reassigned this task from bmansurov to ovasileva.