Page MenuHomePhabricator

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

Description

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

Yurivict created this task.Jan 8 2017, 6:40 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 8 2017, 6:40 AM
Suzukaze-c added a subscriber: Suzukaze-c.EditedJan 9 2017, 12:58 AM

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 subscriber: Jdlrobson.

Yup this is what's happening. Adding background: white; to the image fixes this problem.
This is how we fixed the same problem on mobile (compare https://en.wikipedia.org/wiki/Triglyceride#/media/File:Fat_triglyceride_shorthand_formula.PNG with https://en.m.wikipedia.org/wiki/Triglyceride#/media/File:Fat_triglyceride_shorthand_formula.PNG)

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJan 9 2017, 9:40 AM
Jdlrobson triaged this task as Low priority.
Jdlrobson moved this task from To Triage to Triaged but Future on the Readers-Web-Backlog board.
divadsn added a subscriber: divadsn.Jan 9 2017, 7:06 PM

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

Tgr added a subscriber: Tgr.Jan 9 2017, 7:18 PM

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

This comment was removed by divadsn.
divadsn added a comment.EditedJan 9 2017, 7:40 PM

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

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

divadsn added a comment.EditedJan 22 2017, 8:40 PM

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

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

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

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

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

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

phuedx reassigned this task from nikitavbv to bmansurov.Jan 26 2017, 2:18 PM
Jdlrobson closed this task as Resolved.Jan 26 2017, 7:07 PM
bmansurov removed bmansurov as the assignee of this task.Jan 26 2017, 7:21 PM
bmansurov added a subscriber: bmansurov.
Restricted Application added a project: Multimedia. · View Herald TranscriptOct 10 2017, 7:37 PM