Page MenuHomePhabricator

Hovercard images overlapping text/card edge in Internet Explorer
Closed, ResolvedPublic3 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.


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
Restricted Application added subscribers: Zppix, Aklapper. ยท View Herald TranscriptJul 4 2016, 2:01 PM

Seems like clipping issues :(

Jdlrobson triaged this task as Normal 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

IE 10

IE 11

ovasileva closed this task as Resolved.Dec 8 2016, 1:15 PM
ovasileva claimed this task.
ovasileva reopened this task as Open.Mar 6 2017, 5:33 PM

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!

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

ovasileva raised the priority of this task from Normal to High.Mar 7 2017, 6:03 PM
ovasileva set the point value for this task to 3.Mar 7 2017, 6:08 PM
phuedx added a comment.Mar 7 2017, 6:09 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:

phuedx added a comment.EditedMar 7 2017, 6:51 PM

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

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.

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 updated the task description. (Show Details)Mar 8 2017, 10:29 AM

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

phuedx added a comment.Mar 9 2017, 6:30 PM

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

Pcoombe removed a subscriber: Pcoombe.Mar 9 2017, 6:31 PM

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.

phuedx reassigned this task from phuedx to ovasileva.Mar 14 2017, 11:42 AM
ovasileva closed this task as Resolved.Mar 14 2017, 4:18 PM

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

phuedx reopened this task as Open.Mar 17 2017, 11:03 AM

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.

phuedx claimed this task.Mar 17 2017, 11:04 AM
phuedx added a project: Reading-Web-Sprint-94.
phuedx moved this task from Needs Analysis to Needs Code Review on the Reading-Web-Sprint-94 board.

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 10 - IE11
Windows 10 - Edge
Windows 10 - Chrome 57

and here are two additional ones I checked via cloud-based cross-browser testing -
Windows 8 - IE10

Windows 7 x64 - IE9 x64

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

Jdlrobson reassigned this task from phuedx to ABorbaWMF.Mar 21 2017, 5:07 PM

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

phuedx reassigned this task from ABorbaWMF to bmansurov.Mar 22 2017, 7:31 AM
phuedx reassigned this task from bmansurov to ovasileva.
ovasileva closed this task as Resolved.Mar 22 2017, 4:41 PM