Page MenuHomePhabricator

Black image with transparent background shown as completely black
Closed, ResolvedPublic1 Estimated Story Points


Click on the first image in this wiki page to observe the problem.

The image first shows with the larger size, and then disappears. This happens in chrome, firefox and webkit browsers.

Event Timeline

I think the problem is that the image has a transparent background. The black diagram on the Media Viewer's black background becomes effectively invisible.

I think so too.
Are you able to substitute the background color when image has transparent background?

Aklapper renamed this task from Some images fail to display in their original size when clicked on to Black image with transparent background shown as completely black.Jan 9 2017, 4:34 AM
Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.

So the fix is to add background: white; to .mw-mmv-image img, no matter what background the image has, right? If yes, I will follow up with a patch soon :)

mmv.ui.canvas.less#L71 should handle that. Maybe uppercase extensions break some extension detection logic?

This comment was removed by divadsn.

@Tgr after adding the self-hosted checker.png manually to the element using background: url( checker.png );, it works as it should be:

firefox_2017-01-09_20-38-17.png (1×1 px, 216 KB)

I will test that also out on my local vagrant setup later and see if this also happens when the file extension is uppercase or lowercase.
Edit: Maybe we should apply the background-image no matter what extension the image file has?

@divadsn Are you still working on this issue? If not, I think I can claim and finish it (because it seems to be pretty similar to T155913, which I worked on recently).

@Phantom42 Feel free to claim this task, I am currently too busy doing school, to work onto that.

I know that the solution for this is to find the code section, where the css class for the image file extension is being appended. The extension have to be lower case in order to work properly. :)

@divadsn You were right! Lowercasing extension fixed the issue.

Change 333998 had a related patch set uploaded (by Phantom42):
Fix displaying images with uppercase extension.

Change 333998 merged by jenkins-bot:
Fix displaying images with uppercase extension.

phuedx set the point value for this task to 1.Jan 26 2017, 9:38 AM
phuedx subscribed.

1 for reviewing the code and creating the test case on the Beta Cluster. @Jdlrobson: Is this estimate fair?