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?

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)

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?

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

@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

To sign off we can verify this works using this URL:
https://en.wikipedia.beta.wmflabs.org/wiki/MMV_lowercase_extension#/media/File:Fat_triglyceride_shorthand_formula.PNG

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

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

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