Seems like clipping issues :(

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

IE 10

IE 11

ping @phuedx

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

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

Sorry. The second bug that @ABorbaWMF found is here: T158632#3071104

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

@phuedx - could it be the cause of T142640: Hovercards: Settings cog is invisible on IE 11 / Win 7?

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

In T139297#3081260, @ovasileva wrote:

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

This should be testable within an hour or so on the beta cluster.

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.

In the interest of unblocking rEPOPd8fe9207cd29: renderer: Ensure settings cog visible in IE9-11 and rEPOP46b918a924bf: renderer: Ensure images don't overflow container, I'll rebase them atop the master branch, leaving rEPOP51855333421d: rest: Don't scale unscalable thumbnails to be reviewed independently.

Done.

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

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.

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

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.

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

In T139297#3109390, @phuedx wrote:

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

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