Page MenuHomePhabricator

MultimediaViewer in mobile should use patterned background as on desktop
Open, HighPublic

Description

Background

Some images have a transparent background, which is not a problem in day mode. Some images, however, have a transparent background that causes problems when night mode is activated, for example black signatures of living personalities.

Steps to reproduce

  1. visit https://en.wikipedia.beta.wmflabs.org/wiki/Lightbox_demo#mediaviewer/File:Copyleft.svg
  2. visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Lightbox_demo?minervanightmode=1#/media/File:Copyleft.svg

Expected results

The background should consist of patterns not be white on mobile as it is on desktop.
{F44249619}

Actual results

  • Screenshot or description of the issue.

Environments observed

  • Browser version:
  • OS version:
  • Device model:
  • Device language:

Check any additional observations

Stack trace

Console output

Notes about other solutions

Two solutions:

  • invert image colors when night mode is active (not a global solution : hard to explain the cases to the communities),
  • add a white background to images (possible global solution when the problem arises).

Problem: what can be done to make the image readable when clicked and viewed with the MultimediaViewer?

Should the projects locally play by overriding some CSS rules of the viewer? Should the MultimediaViewer apply the same classes applied on the thumb ([[File:ohno.png|thumb|class=pls-we-need-some-light]])? Etc.

Event Timeline

Hello @Jdlrobson, can you tell me if I've assigned the task to the right projects? I think the problem raised needs to be thought through early on before generalizing night mode.

@Lofhi thanks for raising this, @Jdlrobson is out this week.
Images in night mode are hard, and the issue isn't limited to multimedia viewer either. Images can appear black on black in the content as well.

We don't have a general night-mode solution for this issue yet, but the use-cases of black images on transparent backgrounds are pretty vast:

  • signatures
  • pictures of text, scripts, hieroglyphs
  • pictures of math
  • Labels on graphs or charts

Furthermore, some images with transparent backgrounds look fine in night mode (such as sports-team clothing, etc). This makes it hard to implement a general solution.

In some cases, if the image is produced by an extension, such as math, hieroglyphs or charts, we can modify the extension and create a global solution for those specific extensions.
In other cases, if the image is uploaded as content, we can either put a white background on all images, or target each image individually.
It would be interesting if we could programatically detect which images need fixing, maybe something to consider.

For a per-image solution, we have a class that we use for situations where we need to invert something for night mode: .skin-invert. This class applies a filter that flips the colors from light to dark.
This class can be applied to thumbnails, and if it is, then yes, I think MultiMediaViewer should also apply the same class to the image as well.

With the types of images you are quoting, the .skin-invert class seems totally fine. But some may still need an adaptative background color (imagining we will have more than two themes in the future) like .media-with-transparency, no? If it's the case, I think the WMF should define this type of class first and not let wikis rely on "in-house" solutions in the first place.

The problem is also to find classes that are easy and short to understand/remember. If they are 20 characters long, nobody will use them...

An interesting feature would be to be able to tag an image as potentially having contrast problems if the background is not white. This feature would be centralized on Commons, but should also work for wiki-located media.

Per my note on T26070#9682644 I am considering images out of scope for the first release.

After thinking this for some time, I have come to the conclusion that there is no magical formula for fixing images broadly, and trying to correct them via a background or invert is too dangerous IMO and it is best for them to be addressed in templates on a case per case basis as we did for signatures in infoboxes: T359587.

One solution I've seen was to apply the invert filter on [src*=".svg"] but the downside of this is it inverts images that shouldn't be inverted.

If you have some specific articles you can point to on French Wikipedia where the issue arises that would be helpful.

Jdlrobson renamed this task from Interactions between MultimediaViewer and night mode to MultimediaViewer in mobile should use patterned background as on desktop.Wed, Apr 3, 2:32 AM
Jdlrobson updated the task description. (Show Details)

Oh this is for multimedia viewer. My mistake, the best general solution here I've seen would involve applying a checked background to all images as we do on desktop MultimediaViewer ( T190204 and T77201)

MultimediaViewer uses a background image but we can use a CSS pattern: https://www.magicpattern.design/tools/css-backgrounds